「おまじないのように書いているけれど、どんな役割があるの？」「もし書かなかったらどうなるの？」と疑問に感じたことはないでしょうか。
たった1行の短いコードですが、実はWebブラウザーがページを正しく美しく描画するために欠かせない大切な役割を担っています。
この記事では、文書型宣言（DOCTYPE宣言）の基本的な意味から、なぜ記述が必要なのかという仕組み、昔のHTMLとの違い、記述時のルールまでを分かりやすく解説します。
文書型宣言（DOCTYPE宣言）とは？HTMLタグとの違い
HTMLファイルの先頭に記述する「<!DOCTYPE html>」は、専門用語で「文書型宣言（Document Type Declaration：DOCTYPE宣言）」と呼ばれます。
一見するとHTMLタグのひとつのように見えますが、実は一般的なHTMLタグとは性質が異なります。
HTMLタグと文書型宣言の違い
- 一般的なHTMLタグ（<p>や<h1>など）：画面に表示する文章や画像の「構造や意味」を定義する要素
- 文書型宣言（<!DOCTYPE html>）：ブラウザーに対して「このファイルはどのバージョンのHTML仕様に沿って書かれているか」を宣言する命令文
ブラウザーはHTMLファイルを上から順に読み込んで画面を描画します。その際、一番最初に「<!DOCTYPE html>」を認識することで、「この文書はHTML5の標準ルールに従って解釈すればよいのだ」と判断し、正しく処理を開始します。
なぜ<!DOCTYPE html>が必要なのか？表示モードの切り替え
文書型宣言を書く最大の目的は、ブラウザーを「標準モード」で動作させることにあります。
現在のWebブラウザーには、過去の歴史的な経緯から、Webページを描画するための「2つの表示モード」が備わっています。
DOCTYPE宣言による標準モードと互換モードの比較
標準モード（Standards Mode）
W3CやWHATWGといった国際標準化団体が定めた最新のWeb標準仕様に忠実に従ってページを表示するモードです。
現代のWeb制作で想定されているCSSのレイアウト、余白（マージンやパディング）の計算、文字の配置などがすべて意図した通りに動作します。「<!DOCTYPE html>」を先頭に記述することで、ブラウザーはこの標準モードに切り替わります。
互換モード（Quirks Mode）
1990年代後半の初期インターネット時代に作られた、古いWebサイトを表示するために用意されているモードです。
当時普及していた古いブラウザー（Internet Explorerの初期バージョンなど）には独自の解釈ルールが多く存在していました。DOCTYPE宣言がない場合、ブラウザーは「これは古い時代のページかもしれない」と判断し、過去の古い挙動を再現しようとします。
互換モードになると起きる主なトラブル
- ボックスモデルの計算が狂い、指定した幅（width）や余白（padding）が想定とずれる
- 中央揃えにするための「margin: 0 auto;」が効かなくなる場合がある
- ブラウザー（Chrome、Safari、Edgeなど）によってデザインの表示崩れが発生する
現代の整ったCSSレイアウトを意図通りに機能させるためには、必ずDOCTYPE宣言を記述して標準モードを有効にする必要があります。
昔のHTMLとHTML5の比較：なぜ1行でシンプルになったのか
HTML5が登場する前の時代（HTML 4.01やXHTML 1.0）を知っている方であれば、昔のDOCTYPE宣言がいかに長くて複雑だったかをご記憶かもしれません。
従来の記述例を確認してみましょう。
<!-- 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 Transitionalの文書型宣言（昔の記述） -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">このように、以前は「DTD（文書型定義）」と呼ばれる外部の仕様書URLを細かく明記しなければならず、手入力するのは困難でした。
これに対して、HTML5の文書型宣言は驚くほどシンプルです。
<!-- HTML5の文書型宣言（現在の標準） -->
<!DOCTYPE html>なぜHTML5ではここまで短くなったのか？
昔のHTMLは「SGML（Standard Generalized Markup Language）」という汎用マークアップ言語のルールに基づいて作られていたため、どのような文法規則に従うかをDTDファイルで指定する必要がありました。
しかし、HTML5はSGMLベースから独立し、Webブラウザー自身が自律的に構文解析できる独立した仕様として設計されました。そのため、外部のDTDファイルを参照する必要が一切なくなったのです。
現在のWebブラウザーにとってDOCTYPE宣言に必要な情報は、「ブラウザーを標準モードで起動させること」だけです。その合図として定められた最も短い文字列が「<!DOCTYPE html>」でした。
<!DOCTYPE html>を記述する際の3つの基本ルール
実際にHTMLファイルを作成する際、守るべきルールはとてもシンプルです。
ファイルの絶対に1行目に記述する
DOCTYPE宣言は、HTMLファイルの最初の一文字として配置します。DOCTYPE宣言の前に空行を入れたり、コメント（<!– –>）を書いたりしてはいけません。
<!-- 正しい配置例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<p>本文テキスト</p>
</body>
</html>DOCTYPE宣言より前に余計な記述や空白があると、古いブラウザーや一部の環境で互換モードと誤認されてしまうリスクがあるため、常にファイルの1行目左端から記述します。
大文字・小文字の区別はないが慣例がある
HTML5の仕様上、大文字と小文字は区別されません。そのため、以下のように記述してもブラウザーは問題なく解釈します。
<!DOCTYPE html>（一般的な書き方）<!doctype html>（小文字表記）<!Doctype Html>（混在表記）
一般的なWeb制作の現場では、視認性を高めるため「DOCTYPE」を大文字、「html」を小文字で書く「<!DOCTYPE html>」のスタイルがもっとも広く使われています。
閉じタグは存在しない
HTML要素の多くは「<p>〜</p>」のように開始タグと終了タグ（閉じタグ）で内容を囲みますが、DOCTYPE宣言は要素ではなく「宣言」であるため、閉じタグはありません。「<!DOCTYPE html>」の1行だけで完結します。
まとめ：Webページ制作の基本となる第1歩
「<!DOCTYPE html>」は、Web制作のコードの中で一番最初に入力する短い一行です。
しかし、ブラウザーに標準モードを指示し、現代のWeb標準に沿って正確なデザインを描画させるための極めて重要なスイッチの役割を果たしています。
新しくWebページを作るときは、まずファイルの最上行に「<!DOCTYPE html>」を正しく配置することから制作をスタートしましょう。
