DOCTYPE宣言文って何？
新人デザイナー 佐藤(以下、佐藤)：田中ディレクター、HTMLの一番最初に書いてある英文って何なんですか？
ディレクター 田中(以下、田中)：DOCTYPE宣言文のことかな？
HTMLのバージョンや仕様が書かれているやつ？
佐藤：HTMLにバージョンなんてあるんですか？
田中：あるよ。HTML5って聞いたことない？
佐藤：あぁ、最近よく聞きますね！
田中：そのHTML5の前に、いくつかのバーションがあるんだ。
佐藤：へぇ、そうだったんだ。HTMLの仕様っていうのはなんですか？
田中：HTMLでのタグや属性などのルールなどを定義しているものだよ。
例えば「リンクにはa要素を使う」というようなルールだね。
佐藤：それは誰が定義しているんですか？
田中：W3Cという機関が管理しているんだ。
佐藤：なるほど。その仕様にも種類があるんですか？
田中：仕様にそって「厳格な書き方」「少し緩い書き方」「少し緩い書き方でフレームを使用する」の3種類かな。
厳格な書き方は大変だから、「少し緩い書き方」を定義する事が多い。
さらに詳しく！HTMLの仕様の種類って？
佐藤：へぇ、じゃあ最初の英文では、HTMLのバーションと書き方について宣言しているんですね。
田中：そうだね。あとは書き方によってブラウザの表示モードが変わったりもするよ。
佐藤：表示モード？
田中：ブラウザの表示の仕方には大きく分けて「標準モード」と「互換モード」2つのモードがあるんだ。
佐藤：表示モードが違うとどうなるんですか？
田中：CSSで指定した時の表示方法が変わってくる。
CSSでデザインをするなら、仕様通りに正しく表示される「標準モード」を使った方が良いね。
さらに詳しく！互換モードと標準モード
佐藤：うーん、なるほど・・・。
田中：詳しくは「DOCTYPE スイッチ」と検索すると出てくると思うよ。
佐藤：分かりました！
DOCTYPE宣言文では、使用するHTMLのバーション、仕様を宣言します。
書き方によって、ブラウザの表示モードを切り替えます。
さらに詳しく！HTMLの仕様の種類って？
DTD(Document Type Definition)、日本語にすると文書型定義といい、HTMLで使用することができるタグや属性、要素の配置に関するルールなどを定義しているものです。以下の3つの種類があります。
- Strict DTD
- HTML4.01本来の記述に厳格に従う。非推奨の要素やフレームを使うことが出来ません。
- 記述例
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
- Transitional DTD
- 要素の位置など比較的甘い記述ができますが、フレームを使うことが出来ません。
現在最も一般的に使われているバージョンです。
- 記述例
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- Frameset DTD
- Transitional DTDにフレームの使用を加えた宣言です。
- 記述例
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
さらに詳しく！互換モードと標準モード
主に2種類、FirefoxやSafariなどの一部ブラウザでは3種類のモードがあり、ブラウザでの表示の仕方が異なります。
- 互換モード(後方互換モード)
- 過去のバージョンのブラウザと互換性のある表示モード。
文法ミスはある程度許容され、ブラウザがうまくカバーして表示されます。
ただし、HTMLやCSSを正しく書いていてもブラウザ独自の解釈で表示され、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。
- 標準モード(標準仕様準拠モード)
- 文法ミスが無視されますが、標準仕様通りにHTML,CSSを書けば正しく表示されます。
Web標準でWebページを表示したい場合はこのモードを使用します。
- 準標準モード
- 標準モードの表示をベースに互換モードにも配慮し、なるべく昔のWebページの表示も崩さないように考えられたモードです。
Firefox、Safariなど一部のブラウザに搭載されています。
記事担当者のコメント
英文でとっつき難いイメージのあるDOCTYPE宣言文ですが、使用するHTMLに合わせて適切なDOCTYPE宣言文を指定することによって、ブラウザが仕様通りにHTMLを解釈してくれます。コーディングの際のトラブルを防ぐ事が出来ますので、正しく理解しておきたいですね。