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で改行するならbrタグはダメ!htmlの文法的に正しいのはpタグでの段落分け
WordPressでブログやサイトを運営している皆さま、こんにちは。 何の気無し ...

HTML5の新要素、section・article・header・footerをSEO的に正しい順序でマークアップする
HTML5にて新しく追加された要素に、section,article,heade ...

htmlでリンクを生成するaタグ(アンカータグ)をSEO的に正しく使う!アンカーテキストの使い方まで
htmlでリンクを作成する場合、aタグ = アンカータグを使うことはほとんどの方 ...

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

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