2026年4月16日
HTML DOCTYPE とは？
HTMLファイルの一番最初に書く <!DOCTYPE html> を見たことがありますか？これが DOCTYPE宣言（ドックタイプせんげん） です。
DOCTYPE宣言は「このファイルはHTML5で書かれています」とブラウザに伝えるための宣言です。タグではなく、ブラウザへの指示文です。
HTML5での書き方
現在のHTML5では、DOCTYPE宣言はとてもシンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<!-- ページの内容 -->
</body>
</html><!DOCTYPE html> は必ずHTMLファイルの 1行目 に書きます。
なぜDOCTYPE宣言が必要なの？
DOCTYPE宣言がないと、ブラウザが 後方互換モード（Quirksモード） で動作します。後方互換モードでは、古いブラウザの動作に合わせた表示になり、CSSが意図通りに効かないことがあります。
DOCTYPE宣言を書くことで、ブラウザが 標準モード で動作し、現代のHTML・CSSの仕様通りに表示されます。
💡 ポイント：
- DOCTYPE宣言はHTMLファイルの1行目に必ず書く
- 大文字・小文字は区別しない（
<!doctype html>でもOK） - HTML5では
<!DOCTYPE html>だけでOK（以前は長い記述が必要だった）
🔥 HTMLとCSSの違いで実践してみましょう。
DOCTYPEの歴史
DOCTYPE宣言は、HTMLのバージョンによって書き方が大きく違いました。
| バージョン | DOCTYPE宣言 | 特徴 |
|---|---|---|
| HTML4 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
とても長い。URLの指定が必要だった |
| XHTML | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
さらに厳密なルール。タグの閉じ忘れはエラーになった |
| HTML5 | <!DOCTYPE html> |
たった15文字。シンプルで覚えやすい |
HTML5 になって DOCTYPE宣言がとてもシンプルになりました。昔のHTMLを見かけたときに「長いDOCTYPEだな」と思ったら、それは古いバージョンのHTMLです。今は <!DOCTYPE html> だけでOKです。
💡 HTMLアクセシビリティで基礎を確認できます。
DOCTYPEを書き忘れるとどうなる？
DOCTYPE宣言を書き忘れると、ブラウザはQuirksモード（クァークスモード）という特殊なモードで動作します。
Quirksモードとは
Quirksモードは、1990年代の古いブラウザの動作を再現するモードです。このモードでは、CSSの解釈が現代の標準と異なるため、以下のような問題が起きます。
- ボックスモデルの計算が変わる：
widthに padding と border が含まれる（標準モードでは含まれない） - フォントサイズの継承が変わる：テーブル内の文字サイズが意図通りにならない
- 中央揃えが効かない：
margin: 0 autoが効かないことがある
確認方法
ブラウザの開発者ツール（F12）のコンソールに以下を入力すると、現在のモードを確認できます。
document.compatMode
// "CSS1Compat" → 標準モード ✅
// "BackCompat" → Quirksモード ❌よくある間違い
- DOCTYPE宣言の前に空行やコメントを書く：一部の古いブラウザでは、DOCTYPE宣言の前に何かがあるとQuirksモードになることがあります。
<!DOCTYPE html>は必ずファイルの1行目に書きましょう。 - DOCTYPE宣言を閉じタグで書く：
</!DOCTYPE html>と書くのは間違いです。DOCTYPE宣言は閉じタグがありません。 - HTMLタグと混同する：DOCTYPE宣言はHTMLタグではなく、ブラウザへの指示文です。
<html>タグの前に書きます。
🔗 あわせてHTMLフォームの作り方もチェックしてみましょう。
DOCTYPEに関するよくある疑問
DOCTYPEについて、初心者がよく持つ疑問に答えます。
疑問1：DOCTYPEを書き忘れるとどうなる？
DOCTYPEがないと、ブラウザは「互換モード（Quirks Mode）」で表示します。互換モードでは、CSSの計算方法が変わったり、余白の扱いが違ったりします。見た目が崩れる原因になるので、必ず書きましょう。
疑問2：大文字と小文字はどちらでもいい？
はい、どちらでも動きます。「DOCTYPE」でも「doctype」でも「Doctype」でも大丈夫です。ただし、慣例として大文字で書くことが多いです。
疑問3：HTMLのバージョンは指定しなくていい？
HTML5以降は「<!DOCTYPE html>」だけで十分です。昔のHTML4やXHTMLでは長いDOCTYPE宣言が必要でしたが、今は短い形で書けます。新しくページを作るときは、常にこの短い形を使いましょう。
疑問4：DOCTYPEはHTMLタグの一部？
いいえ、DOCTYPEはHTMLタグではありません。ブラウザへの「指示」です。そのため閉じタグもありません。HTMLの構造（htmlタグ、headタグ、bodyタグ）とは別のものだと覚えておきましょう。
HTMLの基本的な構造をもっと詳しく知りたい人は「HTMLとは？初心者向けにわかりやすく解説」を読んでみてください。タグの書き方やページの骨組みを学べます。
DOCTYPEを正しく書いたら、次はページの中身を充実させましょう。headerやmainなどのセマンティックタグを使うと、ページの構造がわかりやすくなります。詳しくは「セマンティックタグとは」で解説しています。
まとめ
- ✅
<!DOCTYPE html>はHTMLファイルの1行目に書く - ✅ ブラウザに「HTML5で書かれています」と伝える宣言
- ✅ 書かないとブラウザが後方互換モードで動作し、表示が崩れる可能性がある
- ✅ HTML5では
<!DOCTYPE html>だけでOK - ✅ HTML4やXHTMLでは長いDOCTYPE宣言が必要だったが、HTML5でシンプルになった
- ✅ Quirksモードになっていないか、
document.compatModeで確認できる
DOCTYPE宣言はHTMLの基本中の基本です。レッスンでさらに詳しく学んでみましょう。