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のmark要素で該当の文章をハイライトして目立たせる
HTML5で新しく追加された要素にmark要素があります。 これは、囲んだ部分の ...

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

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

html文書の情報(メタデータ)を指定するmetaタグの使い方と主な属性まとめ
html文書の情報(メタデータ)を指定するのが、metaタグです。 SEO的に重 ...

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