この記事の要点

現代の 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 Mode	W3C / 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 Mode	HTML5 では XML 宣言不要
文字コード宣言が DOCTYPE の前	HTML としては OK	<meta charset> は <head> 内に
テンプレートエンジンで漏れる	本番のみ Quirks Mode	レイアウトテンプレートの先頭で固定

HTML5 Validator で確認

• W3C Markup Validation Service — URL / ファイル / 直接貼り付けで検証
• Nu Html Checker — HTML5 公式チェッカー
• VS Code 拡張: HTMLHint、WebHint で保存時自動チェック

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 系の名残。現代の新規ページで書くべきではありません。