HTML の DOCTYPE について
DOCTYPE とは
DOCTYPE は、HTML ファイルの先頭に記載します。
HTML5 の場合、以下です。
<!DOCTYPE html>
HTML4.01(HTML 4.01 Transitional) の場合、以下です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5 になって、だいぶ簡略化されていることがわかります。
DOCTYPE を記載することで、その HTML 文書がどのバージョンの HTML の仕様に準拠している書かれているか、をブラウザに伝えます。
DOCTYPE は書かなくてはいけないのか
技術的には、DOCTYPE を記述しなくても、ブラウザでページを表示することは可能です。
しかし、DOCTYPE の記述がない場合、前述のように、ブラウザはその HTML 文書がどのバージョンで書かれているのかがわかりません。
その時、ブラウザは大抵互換モードで表示します。
※ブラウザのモードについては後述
この互換モードは、実際の CSS の決まりにそっていないルールで画面の描写を行うため、想定とは異なる画面描写となる場合があります。
想定した画面描写を確実に実現するためにも、DOCTYPE は指定した方がいいといえます。
HTML5 の仕様でも、DOCTYPE は必須とされています。
8 The HTML syntax — HTML5
http://www.w3.org/TR/html5/syntax.html#the-doctype
—
8.1.1 The DOCTYPE
A DOCTYPE is a required preamble.
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
—
ブラウザのモード
ブラウザの描写モードとして互換モードがあることを記載しましたが、もうひとつ標準モードと呼ばれるものがあります。(ブラウザによってはその中間のモードもあります)
これまでの記載の通り、どちらのモードで動くかは DOCTYPE の記述に依存します。
例えば FireFox の場合、以下の URL に記載されているロジックで、モードを決定するようです。
Mozilla’s DOCTYPE sniffing | MDN
https://developer.mozilla.org/ja/docs/Mozilla’s_DOCTYPE_sniffing
ブラウザがどちらのモードで動いているか確認する手段
Javascript を実行することで確認できます。
console.log(document.compatMode);
FireFox(Fire Bug 使用) の場合の手順は以下です。
1) 確認したいページを開いた状態で F12 をおします。
2) Fire Bug が起動しますので、「コンソール」タブを選択します。
3) 上記のコードを入力します。
4) コンソールの標準出力に結果がでます。
CSS1Compat —> 標準モード
BackCompat —> 互換モード
参考情報
=======
HTML5 の仕様については、以下 URL に記載されています。
HTML5(English)
http://www.w3.org/TR/html5/