HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう
htmlファイルの先頭に必ず記述してあるDOCTYPE宣言ですが、何となくコピペして使っていませんか？DOCTYPE宣言は、簡単に説明すると、文書の仕様をブラウザに伝えるためのものです。
一見、わかりにくいタグですが、調べてみると、使うべき宣言がわかってきます。
SEO対策を行うには、正しいタグで記述することも大切です。
少しずつでもタグの記述方法を覚えましょう。
ということで、今回はDOCTYPE宣言について、重要なポイントを絞って説明していきたいと思います。
※DOCTYPE宣言とは、Document Type Definition（DTD）のことで、文書型宣言とも呼ばれます。
目次
HTML4.01の3種類のDTD
HTML 4.01厳密型DTD（strict）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
厳密型DTDで、W3Cが非推奨とする要素と属性は使えません。フレームも使えません。
cssを理解している方向けで、スタイルを全てcssで設定していれば全く問題ありません。
HTML 4.01移行型DTD（Transitional）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
移行型DTDで、W3Cが非推奨とする要素と属性が使えますが、フレームは使えません。
htmlにスタイルを突発的に追加することがあるなら、この宣言を設定しておきましょう。
非推奨とされる要素と属性
非推奨の要素と属性を下記にまとめました。strictを宣言する際の参考にしてください。
背景が赤い箇所が非推奨とされる要素と属性で、それぞれcssで代替可能なスタイルもまとめてあります。
| 非推奨の要素 | 非推奨の属性 | 代替できるCSS |
|---|---|---|
| <applet> | ||
| <basefont> | size | font-size |
| <body> | bgcolor | background-color |
| background | background-image | |
| text | color | |
| link | （a:link）color | |
| vlink | （a:visited）color | |
| alink | （a:active）color | |
| <br> | clear | clear |
| <caption> | align | text-align、caption-side |
| <center> | text-align | |
| <dir> | ||
| <div> | align | text-align |
| <dl> | compact | |
| <font> | size | font-size |
| color | color | |
| face | font-family | |
| <h1>-<h6> | align | text-align |
| <hr> | size | height |
| width | width | |
| align | text-align、margin | |
| noshade | ||
| <html> | version | |
| <iframe> | align | vertical-align、float |
| <img> | align | vertical-align、float |
| border | border | |
| hspace | margin | |
| vspace | margin | |
| <input> | align | vertical-align、float |
| <isindex> | ||
| <legend> | align | |
| <li> | type | list-style-type |
| value | ||
| <menu> | ||
| <object> | align | vertical-align、float |
| border | border | |
| hspace | margin | |
| vspace | margin | |
| <ol> | type | list-style-type |
| start | ||
| compact | ||
| <p> | align | text-align |
| <pre> | width | width |
| <s> | text-decoration | |
| <script> | language | |
| <strike> | text-decoration | |
| <table> | align | float、margin |
| bgcolor | background-color | |
| <td> | width | width |
| height | height | |
| bgcolor | background-color | |
| nowrap | white-space | |
| <th> | width | width |
| height | height | |
| bgcolor | background-color | |
| nowrap | white-space | |
| <tr> | bgcolor | background-color |
| <u> | text-decoration | |
| <ul> | type | list-style-type |
| compact |
HTML 4.01 フレーム設定型DTD（Frameset）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
フレーム設定型DTDで、フレームを使用したファイルに使います。
最近では、フレーム分けされたサイトはあまり見かけないため、ほぼ使わないDTDです。
システム識別子の省略による表示モード
システム識別子は省略できますが、その有無によってDOCTYPEスイッチが変わり、各ブラウザの表示モードが変更されます。
標準モードは、W3C標準仕様に則ってレンダリングされ、互換モードは、古いブラウザに互換性を持ち、cssの解釈が変わります。
システム識別子の有無と表示モード一覧
| DTD | システム識別子 | IE | Firefox | Opera |
|---|---|---|---|---|
| Strict | 有り | 標準モード | 標準モード | 標準モード |
| 無し | 標準モード | 標準モード | 標準モード | |
| Transitional | 有り | 標準モード | 標準モード | 標準モード |
| 無し | 互換モード | 互換モード | 互換モード |
このように、Strictを宣言する場合、システム識別子を省略してもレンダリングには問題ないでしょう。古いですが、Mac IE6だと互換モードとなります。
Transitionalの場合、標準モードでレンダリングするならシステム識別子は省略しないで、記述します。
標準モードと互換モードの具体的な表示の違いがこちらです。
- ボーダー、パディングの解釈
- センタリングの解釈
- フォントサイズの解釈
HTML5のDOCTYPE宣言
<!DOCTYPE html>
HTML5では、DOCTYPE宣言は1種類で、シンプルな記述となります。
これは、無くても表示されますが、その場合、互換モードで表示されてしまうため、必ず設置しておきます。
DOCTYPE宣言についてまとめ
今回は、HTML4.01のDOCTYPE宣言を中心にまとめましたが、最近では、HTML5を良く見かけるようになりました。
以前のdivのような意味を持たないタグをセマンティックなマークアップができることから、今後もHTML5は増えていくと思います。
ただし、IE8への対応も必要となるため、必要に応じて使い分けてください。
また、セマンテックに関しては下記の記事も参考にしてみてください。
