◀ 2.

HTML DOCTYPE 宣言完全ガイド（HTML5 / Quirks Mode / Standards Mode）

▶
編集
この記事の要点
  • 現代の DOCTYPE は <!DOCTYPE html> 一択（HTML5 / HTML Living Standard）
  • 昔は HTML 4.01 / XHTML 1.0/1.1 用に SGML 由来の長い DOCTYPE が必要だった
  • DOCTYPE 無しだと Quirks Mode（互換モード）で古い IE 互換挙動 → レイアウト崩れの原因
  • DOCTYPE 有り → Standards Mode（標準モード）で現代の CSS 仕様通り描画
  • 確認は document.compatMode: CSS1Compat なら標準、BackCompat なら Quirks

結論: 現代の HTML はこれだけ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

<!DOCTYPE html> はHTML 文書の先頭に必ず書きます。これがあるとブラウザはStandards Mode（標準モード）で描画します。大文字小文字は区別されませんが、慣習的に大文字で書きます。

DOCTYPE の歴史

バージョンDOCTYPE由来
HTML5 / Living Standard<!DOCTYPE html>2014 ～ 現代。極限まで短縮
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">SGML の DTD 参照
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">非推奨タグ許容版
XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XML ベース
XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">モジュール化 XHTML

HTML5 で DOCTYPE が 15 文字に縮んだのは「ブラウザをStandards Modeに切替えるためだけのスイッチ」と割り切ったため。SGML / XML としての形式的意味は捨てられました。

Quirks Mode vs Standards Mode

ブラウザは DOCTYPE を見て2 つの描画モードを切り替えます。

モード挙動発動条件
Standards ModeW3C / WHATWG 標準通り<!DOCTYPE html> 等
Almost Standards Mode標準 + 一部 IE 互換（インライン画像下の空白等）HTML 4.01 Transitional 等
Quirks Mode古い IE 互換（box-sizing、margin 等が異なる）DOCTYPE 無し / 古い / 文字列誤り

Quirks Mode で起きるトラブル例

<!-- ❌ DOCTYPE 無し → Quirks Mode → box-sizing が IE5 互換 -->
<html>
<head><style>
    .box { width: 200px; padding: 20px; border: 5px solid red; }
</style></head>
<body>
    <div class="box">
        <!-- Quirks Mode: 200px (padding + border 込みの IE5 box model) -->
        <!-- Standards Mode: 250px (200 + 20*2 + 5*2 = 250、CSS box model) -->
    </div>
</body>
</html>

レンダリングモードの確認方法

// ブラウザ DevTools の Console で実行
console.log(document.compatMode);

// "CSS1Compat" → Standards Mode（OK）
// "BackCompat" → Quirks Mode（NG、DOCTYPE 不足の疑い）

または:

  • Chrome DevTools: Application タブ → Manifest 付近で「Rendering mode」確認
  • Firefox DevTools: Inspector 開いてページ情報
  • Lighthouse: Audits で「No DOCTYPE」警告

HTML5 でも書ける旧式

HTML 5.2 まではこんな書き方も許容されていましたが、2026 年現在は <!DOCTYPE html> 推奨。

<!-- ❌ 古い -->
<!DOCTYPE html SYSTEM "about:legacy-compat">

<!-- ❌ 旧式（SGML 由来） -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<!-- ✅ 現代 -->
<!DOCTYPE html>

よくあるミスと対処

ミス結果対処
DOCTYPE 無しQuirks Mode で CSS 崩れ1 行目に <!DOCTYPE html>
DOCTYPE 前にコメントや BOM 以外の文字Quirks Mode必ず最初の行に
<?xml ...?> を冒頭に書くIE で Quirks ModeHTML5 では XML 宣言不要
文字コード宣言が DOCTYPE の前HTML としては OK<meta charset> は <head> 内に
テンプレートエンジンで漏れる本番のみ Quirks Modeレイアウトテンプレートの先頭で固定

HTML5 Validator で確認

FAQ

Q: <!doctype html> でもいい？
A: OK。HTML5 では大文字小文字を問いません。慣習的に大文字を使いますが、Prettier 等のフォーマッタは小文字を使うことも。

Q: なぜ HTML5 の DOCTYPE は短い？
A: SGML の DTD 参照を捨て、「Standards Mode に切替えるためだけのマジック文字列」にしたから。仕様策定者が「人間が書ける最短形」を目指しました。

Q: XHTML 文書では？
A: 現代では XHTML はほぼ使われません。XML として処理させたい場合のみ <?xml version="1.0" encoding="UTF-8"?> + application/xhtml+xml MIME。

Q: HTML PUBLIC "..." を見かけた
A: 古い HTML 4 系の名残。現代の新規ページで書くべきではありません。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 全体構造
  2. DOCTYPE宣言
  3. コメント
2026-06-11 07:12:00 guest 248

人気ページ

最近更新/作成されたページ