CSS html

実は重要！？htmlファイルの1行目「文書型宣言」とは

いつもコピペで書いている文字列

コーディングをする上でまず間違いなく書いている、<DOCTYPE…から始まる文字列。
あれは、ただのおまじないではなくちゃんと意味があるものなのです。
難しい話はここでは割愛しますが、あの文字列は「htmlの仕様を宣言」するものなのです。

 

 

よく使われる文書型宣言。

・html4.01

＜!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”＞

一昔前の主流でした。

 

・xhtml

＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞

現在の主流。

 

・html5

<!DOCTYPE html>

今後主流になるであろう「html5」

 

何が違うのか。

それぞれの仕様によって使えるhtml要素（タグ）が異なります。
例えば、html5からは、「header」「footer」「section」「article」等の新しい要素が使えるようになりました。

また文書型宣言によってhtml要素の意味も若干変わっていたりします。
例えば、コピーライトを書くときはhtml4の時代は＜address＞を使っていましたが、
html5では＜small＞を使うのが正しい書き方になりました。

 

 

標準モードと後方互換モード

文書型宣言によってCSSの解釈が異なります。
文書型宣言は「標準モード」と「後方互換モード」の２つがあり一般的なhtmlは「標準モード」で記述されています。
正しく文書型宣言が書かれている場合は「標準モード」になりますが、記述が間違っていたり、文書型宣言がない場合は強制的に後方互換モードになります。
これが原因でレイアウト崩れが起きているということもあります。

では具体的にどのように違うのか？
例えば「width」「height」「margin」「padding」等の解釈の違いです。

このように、横幅300pxのうちに「margin」「padding」「border」を含むかそうでないかの差異が発生します。

 

xhtmlとは

xhtmlとはhtmlとxmlの両方の文書の特性を持ち合わせた書式です。
ですので通常のhtmlとは違い、xmlのルールに則り、
「img」や「br」等の空要素は＜br /＞のように記述する必要があります。

正式なxhtmlの記述は1行目に下記のような「xml宣言」を書き、その後に文書型宣言を記述します。

＜?xml version=”1.0″ encoding=”UTF-8″?＞

ただし、IE6ではこの書式は対応しておらず、1行目を文書型宣言と認識し、
不正な文書型宣言と判断してしまい後方互換モードになってしまうため、
記述する場合はユーザーエージェントなどでIE6のみ記述しないようにする必要があります。

またPHPファイルでxml宣言をする場合、「＜？」がPHPコードの開始と解釈されてしまうため、
echoなどで記述する必要があります。

■例

＜?php echo ‘＜?xml version=”1.0″ encoding=”UTF-8″?＞’; ?＞

 

 

他人のhtmlを修正する時は一番最初に確認

自分で1からhtmlを書く時というよりは、他人のコードを修正するときに、
文書型宣言を確認した上で作業に入るように心がけましょう。

普段は読み飛ばしたりコピペで済ましている1行目にももう少し注目してみましょう！

関連記事