HTMLの文書型宣言についてのまとめ

XHTML1.0の文書型宣言まとめ
今回はHTML文書においての文書型宣言について書こうと思う。
これは一般の人にとって全く関係のない少し専門的な話だが、ウェブ制作に携わる人間にとっては初歩中の初歩の内容だ。

文書型宣言というのはその名の通り、その文書がどの規格に則って記述されているかを宣言する記述である。

現在はHTML5が主流なので文書型宣言についてあまり深く考える必要はなくなったが、それ以前のXHTML1.0やさらに以前のHTML4が主流だった時代には文書型宣言をどうするかを少し検討する必要があった。

つまり今後役に立つ知識ではないし使うこともあまりないので忘れていく可能性が高いため、まだ覚えているうちに備忘録として書いておこうと思う。

HTML5の文書型宣言

HTML5での文書型宣言は、

<!DOCTYPE html>

と書くだけで良い。
これをHTMLファイルの冒頭に記述する。

XHTML1.0の文書型宣言の3パターン

HTML4やXHTML1.0の場合はStrict、Transitional、Framesetの3種類が存在し、それぞれに特徴がある。

今さらHTML4について書くのはあまりにも古すぎるため、ここからはXHTML1.0のこととして書いていきます。

Strict
最も厳格なモードであり、非推奨要素や属性は使うことができないモード。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
非推奨要素や属性などを使用することができるゆるいモード。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
フレームを使用する場合に使うモード。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

フレームを使用したページというのはSEO面でとても不利であるためこのXHTML1.0が主流だった頃からすでにほとんど使われておらず、文書型定義はStrictまたはTransitionalを使用するのが基本であった。

非推奨要素とは?

非推奨要素や属性というのはcenter要素やfont要素、align属性やbackground属性などとにかくたくさんあり、XHTML1.0よりも前のHTML4の時代はこれらを使うことが普通であったため、急な移行を避けるための後方互換性というような意味合いでTransitionalというモードが用意されていたと思われる。

具体例を挙げると、

<center>ここに本文</center>

とか、

<div align="center" background="sample.jpg">ここに本文</div>

のような記述はTransitionalなら許されるが、Strictではダメである。

しかし実際にはTransitionalでこれらの記述を書いたとしてもウェブブラウザがうまく解釈して画面を描画してくれるため、実用上問題になることはあまりない。
ただ、バリデーションエラー(文法)になるので決して好ましいことではない。

非推奨要素を使わずにCSSで実現する

では、非推奨要素や属性を使えないStrict文書の場合、先ほどの2つの例と同じ画面表示を実現するためにはどうするかというと、CSSを使って実現する。

例えば上の例の2つ目の記述をCSSで実現すると、

div{
  text-align : center;
  background-image : url(sample.jpg);
}

となる。

非推奨要素や属性というのはほとんどが画面表示(デザイン)に関するものである。
つまり、デザインに関するものはHTMLではなくCSSで実現しなさいというのが当時のウェブの流れであり、2013年現在においてはCSSで実現することがもはや当たり前になった。

今時font要素やalign属性なんて使っているサイトはほとんどないと思うが、もしこれを読んでいるあなたの周りで見かけることがあったら早急にリニューアルを薦めたほうが良いと思います。
SEO的にもかなりの改善があると思いますよ。