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">
と記述する必要があるので注意しましょう。
関連記事

HTML5におけるhtmlタグの開始・終了タグの基本的な書き方と閉じタグのいらない要素とは
HTML5の勉強をしていると、真っ先に覚える必要があるのがhtmlタグの開始タグ ...

htmlで箇条書きしたい時にリストタグ(ul,li,ol)をきちんと使わないと検索エンジン(SEO)に評価されない
ブログやサイトを運営している皆さん、htmlで箇条書きをする時に面倒くさがって「 ...

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

htmlタグに属性を付与して要素の補足情報を記述するHTML5の書き方について
HTML5でもこれまでのhtmlタグの属性の書き方は変わりありません。 html ...

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