HTMLファイルが文字化けした時はmeta要素のcharset属性でUTF-8を指定する

2017年7月17日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">

と記述する必要があるので注意しましょう。