もちろん無くても自分の所で見ているだけなら適当に表示してくれますが、インターネットの世界ではいろいろな環境の機械で様々なブラウザで見られるので、自分の作っている環境でうまく見えてもどこでもうまくいくとは限りません。そこで自分が基づいて書いたHTMLのきまり(文書の型)を宣言し、それに基づいて表示してもらうように要請します。それがこの文書型宣言です。
主に次の3つの理由からかなり面倒な書き方になっています。
まだまだ古いタイプも残っていますが、これからしばらくは XHTML 1.1 の時代です。
index.html の最初の部分を次のように書き換えてください。
書換前 <html> <head> ………
↓
書換後 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> ………
すべてを理解するのも記憶するのも困難ですが、宣言の出現順と大切な部分をチェックできるようにしておきましょう。
<!DOCTYPE ... XHTML 1.1 .... > <html ....... xml:lang="ja"> <head> <meta .........=UTF-8" />
インターネットエクスプローラ対策として入れている、最後の1行である <meta http-equiv の部分は本来はサーバーに指示を出す為のものでした。ただし最近の設定ではサーバーはこれを読みませんから不要です。おまけに、中の「 text/html 」が正しいのは html の時で xhtml では application/xhtml+xml もしくは application/xml と書くべきなので正しくはないのです。でも。
# application/xhtml+xml は認識しません(ファイルダウンロードのダイアログが出現する)。 XHTML として認識させるためには、 text/xml もしくは application/xml の MIME 型を用いなければなりません(application の定義から行けば、後者の方がベター)。
UTF-8 についての説明です。日本語の文字をどのように使っているかを表すものです。ファイルの中の日本語はいくつかの違った表現方法があります。
もちろん実際に使用している文字コードと合わせなければなりません。geditでは初めての保存の時にそのファイルの文字コードを指定します。
HTMLで使用される日本語の文字符号化方法はおおむね次の3種類です。Shift_JIS はシフトJIS、EUC-JP は EUC、UTF-8 はユニコードと呼ばれることもあります。UTF-8 は中国語やハングルなど多くの言語の文字を扱えるのでよく使われるようになってきました。
名前 | 特徴・用途など | 「愛」のコード表現 |
Shift_JIS | 日本語。windowsで使用 | 88 a4 |
EUC-JP | 日本語。UNIX系のOSで使用 | b0 a6 |
UTF-8 | Unicodeの一形式。多言語に対応。 | e6 84 9b |
iso-8859-1 | 欧文。 ASCII 文字セット。 | 不可能 |
iso-8859-2 | 欧文のもうひとつのタイプ | 不可能 |
もしもShift_JISのときは、次のように指定します。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
もちろんファイルを保存する時も Shift_JIS で保存しなければなりません。
index.html は最終的に次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>このページのタイトル</title> </head> <body> <h1>私の ウェブページ</h1> <p>はじめてのウェブページです。</p> </body> </html>