DOCTYPE宣言で見た目が大きく異なる
HTMLのDOCTYPE宣言によってCSSの認識や表示の仕方に違いがあります。この点について解説します。
なお、以下の文章は本サイトの『HTMLタグ一覧』より文章を引用しています。
汎用性を保たせるためのモード
HTMLの形式が徐々に進化することに並行して、HTMLを装飾（デザイン）するスタイルシート（以下CSS）も変化し続けています。
現在のブラウザはCSSの標準に準拠した解釈でページを表示するようになっていますが、ブラウザの種類やHTMLの形式によってその解釈が異なることがあります。
これを回避するため、個々のブラウザでは古いHTMLのバージョンで書かれたページも表示できるように、互換モードというものが搭載されています。
現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。
このCSSの標準に準拠して表示するモードを『標準モード』、一方過去のブラウザでも表示できるようなレイアウトで表示するモードを『互換モード』と呼んでいます。
従って、HTMLだけでなく、スタイルシートも使ってページをデザインするには注意が必要です。
モードの切り替えの判断は…
現在のWEBブラウザでは、この標準モードと互換モードの切り替えの判断を、HTMLのDOCTYPEスイッチ（宣言）によって行っています。
DOCTYPE宣言とは、HTMLの冒頭に記述するもので、HTML文書のバージョンを表します。（参考：DOCTYPEスイッチの書き方）
参考：DOCTYPE宣言の種類と各ブラウザにおけるモード切替の対応状況
できるだけ標準モードで
互換モードはもともとブラウザで個別に搭載されているものであり、最新のブラウザでは標準モードで書いたページの方がHTMLのDOCTYPEスイッチに従って正確に表示されることが多く、また異なるブラウザで閲覧してもレイアウトが統一されることが多いようです。
互換モードを起動させないDOCTYPE宣言文を選択した方が賢明といえます。
ただし、古いブラウザでは標準モードで宣言したページはレイアウトが崩れることもあります。
『古いブラウザでは表示されません。』などの記述をしておくと親切なページ作りになります。
