HTMLでタイトルが文字化けする場合の対処法を解説！

HTMLのtitle要素はそのWEBページのタイトルを設定できる機能を持っています。title要素を設定することで例えばChromeであればタブに表示される名称がtitle要素で設定した文字になります。

しかしHTMLを記述している文字エンコードとHTML上での文字エンコードの設定を間違えるとWEBページのタイトルや本文が文字化けすることがあります。

今回はHTMLでタイトルや本文が文字化けした場合の対処法について解説します。

それではHTMLでタイトルが文字化けした時の対処法で下記を順番に確かめていきましょう。

HTMLでの文字化けは実際にHTMLをコーディングした際の文字エンコードとHTMLに設定されている文字エンコードの設定のミスマッチが原因です。

例えば実際はUTF-8という文字コードでコーディングしたHTMLが下記のようにShift-JISで設定されている場合に文字化けがおきます。

いかがでしょうか？上記のサンプルコードで文字化けが発生していますでしょうか。

ではこの文字化けの直し方を見ていきます。

文字化けの直し方はとても単純で、実際の文字エンコードにあった記述を1行だけHTMLに加える（すでに設定されていれば変更する）だけです。

例えば先程のサンプルコードはUTF8というWEBでは一般的な文字エンコードで書いています。

その場合UTF8に対応した下記のタグをHTMLのhead要素の中に記述します。

もしもShift-JISの文字コードをで書かれている場合は、上記のUTF-8の部分をShift-JISと変更するだけです。

では先程のサンプルコードに上記の1行を追加してみましょう。

このように実際の文字エンコードとHTML中のmetaタグの文字エンコードの指定があっていれば文字化けは発生しません。

ちなみに下記の文字エンコードの指定はHTML5で導入された書き方です。

もしもHTML5以前の書き方で文字エンコードを指定したい場合は下記のように記述しましょう。

実際の文字エンコードとHTML中の文字エンコードの指定があっているのに、文字化けする場合はHTMLで何かしらの文法エラーが発生している可能性があります。

下記のサイトからHTMLの文法チェックができますので、一度試してみてエラーが発生していたらそれを修正して、再度文字化けしないか確認をしましょう。