DOCTYPE 宣言は「これはどのルールの HTML ですよ」という最初のひと言
HTML ファイルの一行目に書くこれ：
<!DOCTYPE html>
これが DOCTYPE 宣言 です。
役割を一言でいうと、
「この文書は“今どきの HTML（HTML5）ルールで解釈してね」
とブラウザに伝える宣言 です。
見た目が変わる魔法のタグではありません。
でも、これがあるかないかで、
ブラウザの“モード”が変わります。
DOCTYPE がないとどうなるのか
ブラウザが「昔の変な互換モード」で動き出す
DOCTYPE を書かないと、多くのブラウザは
「互換モード（Quirks Mode）」 という状態でページを解釈します。
これは、
昔の IE 時代の“クセのある挙動”を再現しようとするモード
CSS の解釈やレイアウト計算が微妙に違うモード
です。
結果として、
同じ CSS を書いているのに、
ブラウザによってレイアウトがズレる
思った通りに幅や高さが計算されない
といった「原因不明のバグ」にハマりやすくなります。
DOCTYPE をちゃんと書いておくと、
ブラウザは 「標準モード（Standards Mode）」 で動きます。
これは、
仕様にできるだけ忠実に
他のブラウザとも挙動を揃えようとするモード
なので、
「今どきの Web 開発の前提」 になっています。
HTML5 の DOCTYPE が“やたら短い”理由
昔はめちゃくちゃ長かった
今の DOCTYPE はこれだけです。
<!DOCTYPE html>
でも、昔の HTML4 や XHTML の DOCTYPE は
こんな感じでした。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
長いし、意味もよく分からないし、
初心者にはほぼ拷問みたいな文字列でした。
HTML5 では、
「もう細かい DTD（文書定義）は気にしない。
とにかく“HTML だよ”とだけ伝えればいい」
という方針になり、
今のシンプルな形になりました。
だから、現代の Web では
「DOCTYPE はこれ一択で覚えてしまっていい」
という世界です。
実際のひな形の中で DOCTYPE の位置を確認する
一番上に、これだけ書けばいい
最小限の HTML 文書はこうでした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これは DOCTYPE 付きの HTML ページです。</p>
</body>
</html>
DOCTYPE は、
必ず一行目・一番上 に書きます。
<html> よりも前<head> よりも前
です。
ここでやっていることは、
ブラウザに向かって最初に
「これから送るのは HTML5 ですよ。
古い互換モードじゃなくて、標準モードでお願いしますね」
と宣言しているイメージです。
DOCTYPE は「見た目を変える」のではなく「解釈ルールを決める」
だからこそ“動くからいいや”で省略しない
ローカルでちょっと試すだけなら、
DOCTYPE を書かなくても
「なんとなく動く」ことが多いです。
例えば、これでも一応表示されます。
<html>
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
でも、この状態だとブラウザは
互換モードで動く可能性があります。
CSS の細かい挙動
レイアウトの計算
古い仕様との違い
こういうところで、
「原因が分かりにくいバグ」 を生みやすくなります。
だから、プロの現場では
「DOCTYPE がない HTML は、
そもそも“正しいスタートラインに立っていない”」
という感覚です。
JavaScript と DOCTYPE の関係も少しだけ
レイアウトやサイズ計算に影響することがある
JavaScript で DOM を触るとき、
例えば document.documentElement.clientWidth やelement.offsetWidth などを使って
幅や高さを計算することがあります。
このとき、
ブラウザが互換モードか標準モードかで
計算結果が変わることがあります。
つまり、
同じ JS コードを書いているのに、
DOCTYPE がないせいで
レイアウト計算がズレる
ということが起こりえます。
「JavaScript のバグかな？」と思っていたら、
実は DOCTYPE が原因だった、というパターンもあります。
なので、
「JavaScript でレイアウトやサイズを扱うなら、
なおさら DOCTYPE は必須」
と覚えておいてください。
初心者として「DOCTYPE 宣言」で掴んでほしいこと
DOCTYPE は、
見た目を変える派手なタグではありません。
でも、
「このページをどのルールで解釈するか」 を決める
とても重要な一行です。
一行目に <!DOCTYPE html> と必ず書く
これは「HTML5 で標準モードで解釈してね」という宣言
書かないと互換モードになり、レイアウトや挙動が不安定になりやすい
今どきはこの形一択。長い DOCTYPE は忘れていい
あなたが新しい HTML ファイルを作るとき、
何も考えずに指が <!DOCTYPE html> と打ち始めたら、
それはもう“HTML を分かっている人の手つき”になっています。