タイトル: DOCTYPE宣言
SEOタイトル: HTML DOCTYPE 宣言完全ガイド（HTML5 / Quirks Mode / Standards Mode）
| この記事の要点 |
|
結論: 現代の HTML はこれだけ
ページタイトル
Hello
はHTML 文書の先頭に必ず書きます。これがあるとブラウザはStandards Mode（標準モード）で描画します。大文字小文字は区別されませんが、慣習的に大文字で書きます。
DOCTYPE の歴史
| バージョン | DOCTYPE | 由来 |
|---|---|---|
| HTML5 / Living Standard | | 2014 ～ 現代。極限まで短縮 |
| HTML 4.01 Strict | | SGML の DTD 参照 |
| HTML 4.01 Transitional | | 非推奨タグ許容版 |
| XHTML 1.0 Strict | | XML ベース |
| XHTML 1.1 | | モジュール化 XHTML |
HTML5 で DOCTYPE が 15 文字に縮んだのは「ブラウザをStandards Modeに切替えるためだけのスイッチ」と割り切ったため。SGML / XML としての形式的意味は捨てられました。
Quirks Mode vs Standards Mode
ブラウザは DOCTYPE を見て2 つの描画モードを切り替えます。
| モード | 挙動 | 発動条件 |
|---|---|---|
| Standards Mode | W3C / WHATWG 標準通り | |
| Almost Standards Mode | 標準 + 一部 IE 互換（インライン画像下の空白等） | HTML 4.01 Transitional 等 |
| Quirks Mode | 古い IE 互換（box-sizing、margin 等が異なる） | DOCTYPE 無し / 古い / 文字列誤り |
Quirks Mode で起きるトラブル例
レンダリングモードの確認方法
// ブラウザ 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 無し | Quirks Mode で CSS 崩れ | 1 行目に |
| DOCTYPE 前にコメントや BOM 以外の文字 | Quirks Mode | 必ず最初の行に |
| IE で Quirks Mode | HTML5 では XML 宣言不要 |
| 文字コード宣言が DOCTYPE の前 | HTML としては OK | |
| テンプレートエンジンで漏れる | 本番のみ Quirks Mode | レイアウトテンプレートの先頭で固定 |
HTML5 Validator で確認
- W3C Markup Validation Service — URL / ファイル / 直接貼り付けで検証
- Nu Html Checker — HTML5 公式チェッカー
- VS Code 拡張: HTMLHint、WebHint で保存時自動チェック
FAQ
Q: でもいい？
A: OK。HTML5 では大文字小文字を問いません。慣習的に大文字を使いますが、Prettier 等のフォーマッタは小文字を使うことも。
Q: なぜ HTML5 の DOCTYPE は短い？
A: SGML の DTD 参照を捨て、「Standards Mode に切替えるためだけのマジック文字列」にしたから。仕様策定者が「人間が書ける最短形」を目指しました。
Q: XHTML 文書では？
A: 現代では XHTML はほぼ使われません。XML として処理させたい場合のみ + application/xhtml+xml MIME。
Q: HTML PUBLIC "..." を見かけた
A: 古い HTML 4 系の名残。現代の新規ページで書くべきではありません。