HTMLのDOCTYPEとは？役割・書き方・互換モードの罠まで徹底解説

HTMLを書き始めると、ほぼ必ずファイルの先頭で見かけるこの1行。

<!DOCTYPE html>

多くの人が「テンプレに入ってるから、とりあえず置いてる」「無くても表示できるし…」になりがちですが、DOCTYPEは実務ではかなり重要です。
なぜならDOCTYPEは、ブラウザに対して「この文書は何として解釈すべきか」を伝える宣言であり、CSSの計算やレイアウトの挙動を“標準モード”に固定するためのスイッチだからです。

特に、CSSレイアウトが少し複雑になってきた（padding/border、height 100%、レスポンシブ、フォーム部品など）タイミングで、DOCTYPEの不足やミスが原因で「特定環境だけ崩れる」という事故が起こりえます。

この記事では、DOCTYPEの意味・ブラウザ内部での扱い・HTML5の正しい書き方・やりがちなミス・そして互換モードを実際に確認するハンズオンまで、1本で理解できるようにまとめます。

DOCTYPE（文書型宣言）とは何か？

DOCTYPEは Document Type Declaration（文書型宣言） の略です。
HTML文書の先頭に書くことで、ブラウザに次のようなメッセージを伝えます。

このページは HTML5 として解釈してね
レンダリングは 標準仕様（Standards Mode） のルールでやってね

重要ポイント：

DOCTYPEは HTML要素（タグ）ではない
<!DOCTYPE ...> はHTMLの要素ではなく宣言です。したがってDOMに要素としては存在しません。
位置は 文書の先頭 が原則
DOCTYPEの前に空白やコメント、XML宣言などが入ると、ブラウザの判定が変わる場合があります。
正しいDOCTYPEは、互換モードの回避に直結します

DOCTYPEが無いと何が起きる？（互換モードの話）

ブラウザは歴史的に、昔のWebページ（古いHTML/CSSの癖に依存したページ）を壊さないために、表示モードを切り替える仕組みを持っています。代表的なのが次の2つです。

Standards Mode（標準モード）
現代のHTML/CSS仕様に沿って解釈するモード
Quirks Mode（互換モード / 癖モード）
古い挙動を再現しようとするモード（仕様と違う“癖”が残る）

そして、DOCTYPEが無い / 間違っている と、ブラウザが「古いページかもしれない」と判断して Quirks Mode に入る可能性があります。

互換モードで起こりがちなトラブル例

互換モードは「昔の癖を維持」するため、現代のレイアウト前提で書いたHTML/CSSと噛み合わないことがあります。

ボックスモデルの幅計算がズレる（widthの扱いなど）
height: 100% の挙動が想定と変わる
画像やフォームの表示がブラウザ依存になりやすい
line-height やフォント周りが微妙に崩れる
「ローカルではOKなのに本番で崩れる」「特定ブラウザだけ崩れる」原因になる

実際、CSSが効いてないように見えるとか、幅が合わないとか、余白が謎に増えるみたいな問題の根っこに、DOCTYPE不足が潜んでいることがあります。

HTML5のDOCTYPEはこれだけ（覚えるのは一択）

HTML5ではDOCTYPEが大幅に簡略化され、次の1行だけでOKです。

<!DOCTYPE html>

ポイント：

HTML5のDOCTYPEは 短くて固定
大文字小文字は本質的に厳密ではないが、一般的にはこの表記
余計なURLやDTD指定は不要（HTML4/XHTML時代の名残は捨てて良い）

古いDOCTYPE（HTML4 / XHTML）との違い

昔はブラウザの挙動を細かく制御するため、DOCTYPEに「どのDTDを参照するか」を長々と書いていました。今の実務では新規制作で必要になることはほぼありませんが、「古いコードを読む」場面では出会うので、雰囲気だけ知っておくと役に立ちます。

HTML 4.01 Strict の例（長い）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Transitional の例（さらにややこしい）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

結論：
新規制作はHTML5で <!DOCTYPE html> 一択です。
古いDOCTYPEを“真似する”メリットはほぼありません。

DOCTYPEを書く位置：本当に「先頭」に置く

ベストプラクティスは次の並びです。

DOCTYPE
<html>
<head>
<body>

例：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>DOCTYPEテスト</title>
</head>
<body>
  <h1>Hello DOCTYPE</h1>
</body>
</html>

ありがちなミス

DOCTYPEの前にコメントが入っている
先頭に余計な空白や改行がある
HTMLを別ツールで結合した結果、DOCTYPEが途中に落ちた

「ブラウザがどう解釈するか」を安定させるために、DOCTYPEは最上段に固定してください。

ハンズオン：互換モードを“目で見て”確認する

ここから手を動かして、「DOCTYPEがモードを切り替える」ことを確認します。
Chrome/Edge/Firefox どれでもOKです。

ハンズオン1：DOCTYPEあり/なしで `document.compatMode` を確認

1) DOCTYPEありのHTMLを作る（Standards Mode狙い）

doctype-on.html を作成：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>DOCTYPE ON</title>
  <style>
    .note { margin: 12px 0; }
    .box {
      width: 300px;
      padding: 30px;
      border: 10px solid #333;
      background: #eee;
    }
  </style>
</head>
<body>
  <h1>DOCTYPEあり（標準モード）</h1>

  <div class="note">
    DevToolsのConsoleで <code>document.compatMode</code> を確認してください。
  </div>

  <div class="box">このボックスの見た目を確認</div>

  <script>
    console.log("compatMode:", document.compatMode);
  </script>
</body>
</html>

2) DOCTYPEなしのHTMLを作る（Quirks Modeになる可能性）

doctype-off.html を作成（DOCTYPE行を削除）：

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>DOCTYPE OFF</title>
  <style>
    .note { margin: 12px 0; }
    .box {
      width: 300px;
      padding: 30px;
      border: 10px solid #333;
      background: #eee;
    }
  </style>
</head>
<body>
  <h1>DOCTYPEなし（互換モードの可能性）</h1>

  <div class="note">
    DevToolsのConsoleで <code>document.compatMode</code> を確認してください。
  </div>

  <div class="box">このボックスの見た目を確認</div>

  <script>
    console.log("compatMode:", document.compatMode);
  </script>
</body>
</html>

3) ブラウザで開いて確認

doctype-on.html と doctype-off.html をそれぞれ開く
DevTools（F12）→ Console を見る（または Console で手動入力）

Consoleで次を実行：

document.compatMode

結果の見方：

CSS1Compat → 標準モード（Standards Mode）
BackCompat → 互換モード（Quirks Mode）

多くの場合、DOCTYPE無しのページで BackCompat が出ます。
「表示自体はできるけど、内部モードが違う」という点が重要です。

ハンズオン2：互換モードで崩れやすい“幅の計算”を体験する

次は、ボックスモデル（幅の計算）が関わる例をもう少し分かりやすくします。
同じCSSでも、互換モードだと「意図した幅」にならないことがあります。

以下のCSSを .box に追加してみてください（DOCTYPEあり/なし両方で）。

.container {
  width: 320px;
  border: 2px dashed #666;
  padding: 10px;
}
.box {
  width: 300px;
  padding: 30px;
  border: 10px solid #333;
  background: #eee;
}

HTML側をこのように変更：

<div class="container">
  <div class="box">containerの中に収まる？</div>
</div>

期待するイメージは「箱が収まる」ですが、モードによっては はみ出し方 が変わって見えます。
現代のCSSを前提にしているなら、標準モードで固定しないと「計算の前提」が揺れます。

ハンズオン3：DOCTYPEの“書き間違い”を試す

<!DOCTYPE html> の代わりに、適当に書くとどうなるかを確認します。

bad-doctype.html を作成：

<!doctype html5>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>Bad DOCTYPE</title>
</head>
<body>
  <h1>DOCTYPEが間違っている例</h1>
  <p>Consoleに compatMode を出力します。</p>
  <script>
    console.log("compatMode:", document.compatMode);
  </script>
</body>
</html>

<!doctype html5> は 正しいHTML5のDOCTYPEではありません。
環境によって互換モード寄りの扱いになる可能性があります。

結論：
DOCTYPEは “1文字も変えずに” <!DOCTYPE html> を使うのが安全です。

実務でのチェック方法（事故を未然に防ぐ）

1) HTMLテンプレに固定する

新規ページを作るときは、必ずテンプレに <!DOCTYPE html> を入れておきます。
VS Codeなら ! → Enter の雛形でも自動で入ります。

2) DevToolsで compatMode を確認する癖をつける

レイアウト崩れが起きたら、まず：

document.compatMode

これだけで「互換モード事故か？」を即チェックできます。

3) “古いHTML断片”を結合するときに注意

CMS、静的サイトジェネレータ、ビルドツールなどでHTML断片を結合していると、

どこかでDOCTYPEが消える
2つ入る（2重DOCTYPE）
途中に紛れ込む

などが起こりがちです。ビルド後の成果物（生成されたHTML）を1回確認すると安全です。

SEOやアクセシビリティ的にどうなの？

DOCTYPE自体が「SEO順位を直接上げる」わけではありません。
ただし、DOCTYPEが無いことで互換モードになって表示が崩れれば、

読みにくい
クリックしづらい
スマホでレイアウトが変
直帰率が上がる

といった形で UX（ユーザー体験） を下げ、間接的に不利になります。
要するに、DOCTYPEは「SEOの小手先」ではなく、土台の安定性の話です。

ついでに押さえたい“DOCTYPEとセットの基本”

DOCTYPEと一緒に、最低限この2つも入れると「初期事故」が減ります。

文字コード
viewport（スマホ最適化）

テンプレ例：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ページタイトル</title>
</head>
<body>

</body>
</html>

まとめ：結論はシンプル

DOCTYPEは「HTML5として解釈して、標準モードで描画してね」という宣言
無い/間違うと互換モードになり、CSSやレイアウトが崩れる原因になる
HTML5のDOCTYPEは <!DOCTYPE html> だけ。これを先頭に固定する
DevToolsの document.compatMode でモードはすぐ確認できる

投稿日

2024年4月30日

カテゴリー:

未分類

投稿者:

saigo

タグ: