HTMLファイルが文字化けした時はmeta要素のcharset属性でUTF-8を指定する
2018年9月21日HTMLcharset,HTML,meta,UTF-8,ファイル,属性,文字化け,要素
HTMLやCSSの勉強をしていると、実際にコードを書いてみてそれがブラウザ上でどのように反映されているのか確認したくなることが多々あります。
そんな時、必ず遭遇するのが「文字化け」です…。
HTMLファイルをブラウザで開いた際、ほぼ100%"ある記述"を忘れたがために、文字化けが発生してしまいます。(僕はよくやってしまうのですが、皆さんはいかがでしょうか?)
以下で、実際にコードを書いてどのように文字化けされるのかを確認してみます。
HTMLファイルの文字化けは、meta要素のcharset属性に「UTF-8」を指定すれば解消する
論より証拠、実際にコードを書いて確認してみましょう。
<p>文字化けするかTEST</p>
pタグだけの記述では、見事に文字化けしてしまいました。ですが…
<meta charset="UTF-8"> <p>文字化けするかTEST</p>
見事に文字化けが解消されています!(UTF-8は小文字でもOK。区別されません。)
※上記はHTML5での記述方法です。HTML4.01以前の場合、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
と記述する必要があるので注意しましょう。
関連記事

WordPressの目次でページ内リンク(アンカーリンク)をhtml的に正しく記述する
WordPressでサイトやブログを運営している皆様、目次は用意していますか? ...

html要素として必要不可欠なheadタグとbodyタグの違いとは
HTMLの勉強をしていると最初に戸惑うのが、headタグとbodyタグの使い方だ ...

【HTML5・CSS3】i要素かcssのfont-styleで文字を斜体(イタリック体)にする
文字を斜体(イタリック体)にしたい場合、htmlのi要素を使うかcssでfont ...

htmlタグにおけるlinkタグとaタグは全く別物!rel,href要素の使い方まとめ
HTML5における重要なタグが「linkタグ」です。 これは、linkタグを記述 ...

htmlの強調タグ(bold,strong,em,i)の意味とSEO効果について、太字にするならどれが良いか考える
これまで、SEO効果を最大限活かして文章の内容を効果的に強調したいと考えるウェブ ...