【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話

随分前CSS/XHTMLカテゴリに関して何かしら記事を書かなければ！と書きましたが、忘れてた訳じゃなく何を書いたら良いのか考えあぐんでいました。

Web業界は時間の流れが速く、ちょっと離れている間にあっと言う間に自分が持っている知識が過去のものになってしまいます。要するに陳腐化するのが早い訳です。

そんな中にありながら今でも色々なサイトにアクセスすると、昔とった杵柄というか職業癖からついついソースを見てしまうことがあるのですが、意外と多くのサイトで見かけたのがhtml（またはxhtml）の「文字コード宣言」と日本語、特に「title」タグの位置関係です。
まず最初に文字コード宣言とはそのhtmlファイルが何の「文字コード」で書かれているのか示すものです。例えば「Shift_JIS」で書かれたものであれば、metaタグに以下の通りに記述します。

<meta http-equiv="content-type" content="text/html; charset=shift_jis" />

FC2ブログであれば、文字コードは「EUC-JP」なので以下の通りになります。

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />

文字コード宣言はそのファイルが何の文字コードで書かれているかを示すものですので、文字コード宣言と実際にファイルが書かれた文字コード宣言が異なっているとブラウザで表示した際に文字化けを起こす原因となります。
htmlファイルを作成している際には、どの文字コードで記述しているのか気をつけることが重要です。

ちなみにhtmlファイルとCSSファイル（外部CSSファイルを参照している場合）、JavaScriptファイル（同）は同じ文字コードを使用することが必要です。

なお、CSSファイルの場合はCSSファイルの先頭に以下を記述します。

@charset "文字コード";

例えば、xhtmlでよく使われる「UTF-8」でCSSファイルが記述されている場合は以下と記述します。

@charset "=utf-8";

話をhtmlの文字コード宣言に戻します。

htmlでは文字コード宣言の前に日本語を記述してはいけません。理由はブラウザが何の文字コードで記述されたhtmlなのかを判別するのは文字コード宣言であり、文字コード宣言の前に日本語が書かれていると何の文字コードで解釈すべきかブラウザが迷い、文字化けの原因となるからです。

最近のモダンブラウザ（FireFoxやOpera、Chrome等）では文字コード宣言の前に日本語が書かれていても文字化けすることはほとんどありません。事実、大きなトラフィックを集める大手サイトでも文字コード宣言の前にコメントや日本語で記述されたtitleタグが来ているケースがあります。

ですが、文字コード宣言の前に日本語を書かないことは大原則です。正しいhtmlを記述することはアクセシビリティにも通じますのでなるべく守るようにしましょう。

また、日本語でブログやWebページを制作している以上は、titleタグにも日本語を使うことが多くなると思います。titleタグに日本語を使う場合も原則に倣って、文字コード宣言の後にtitleタグを記述するようにしましょう。

<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />
<title>ページのタイトルに日本語を使う場合</title>

ちなみにDreamWeaber8でhtmlファイルの文字コードを変更する場合は、メニューの「修正(M)」→「ページプロパティ(P)」をクリックすると「ページプロパティ」ダイアログが表示されます。
カテゴリから「タイトル/エンコーディング」をクリックし、右側の「エンコーディング(E)」から指定したい文字コードを選択し「適用」ボタンをクリックすれば変更は完了です。

この作業によりmetaタグで記述した文字コードも自動的に変更されます。

<meta http-equiv="Content-Type" content="text/html; charset=変更後の文字コード" />

関連記事

• 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？
• XHTML+CSSスタンダード・デザインガイド
• 【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
• ブラウザのレンダリングモード切替スイッチ一覧
• クソIEをハックしてやる！（IEの条件分岐の使い方）
• 【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう
• 【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話
• IE7をスタンドアローンでインスコ
• 【html/xhtml】ユーザビリティを高める「<label>」の使い方
• ユニバーサルセレクタ（*）はもう古い？

タグ（ブログ内検索もできます）：html xhtml 文字コード宣言 title 日本語