実行できるHTMLドキュメント: DOCTYPE 宣言

Q: は必須ですか？

なくてもページは表示されますが、HTML の仕様では必須で、ブラウザは互換モードで表示します。1 行目には必ず を書きましょう。

Q: DOCTYPE は大文字と小文字を区別しますか？

区別しません。 、 、 はどれも同じ意味です。大文字の DOCTYPE と小文字の html を組み合わせる書き方が一般的です。

Q: DOCTYPE は HTML タグですか？

いいえ。要素ではなく宣言です。終了タグはなく、属性も付けられず、document.body にも現れません。DOM の中では独立した DocumentType ノードで、document.doctype から参照できます。

Q: ページが互換モードかどうかはどう確認しますか？

ブラウザのコンソールを開いて document.compatMode を実行します。"CSS1Compat" なら標準モード (またはほぼ標準モード)、"BackCompat" なら互換モードです。

`<!DOCTYPE html>` とは

<!DOCTYPE html> は DOCTYPE 宣言で、HTML ファイルの 1 行目、<html> タグより前に書きます。ブラウザに「これは最新の HTML 文書です」と伝える役割があり、ブラウザはそれを受けて現在の HTML と CSS の仕様どおりに描画する標準モードでページを表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

HTML5 の DOCTYPE はこの 1 行だけです。終了タグはなく、中に何かを入れることもありません。

書き方のルール

最初に書く。 前に置けるのは空白とコメントだけです。DOCTYPE より前に文字やタグがあると、ブラウザは DOCTYPE を無視します。
大文字と小文字は区別されない。 <!DOCTYPE html> と <!doctype html> は同じです。どちらかに決めて統一しましょう。
要素ではない。 </!DOCTYPE> は存在せず、class などの属性も付けられません。
DOCTYPE の後の単語は html にする。 <!DOCTYPE html5> は新しいバージョンではありません。ブラウザは有効な DOCTYPE がないページとして扱います。
1 つの文書に 1 つだけ。 複数のファイル (テンプレートやインクルード) から組み立てるページでも、最終的な HTML の先頭に出力する DOCTYPE は 1 つです。

標準モードと互換モード

ブラウザには 3 つの描画モードがあり、DOCTYPE によってどれかが選ばれます。

モード	何で有効になるか	何が変わるか
標準モード	`<!DOCTYPE html>` などの現行の DOCTYPE	すべて現在の仕様どおり
ほぼ標準モード (limited quirks mode)	URL 付きの HTML 4.01 Transitional または Frameset、XHTML 1.0 Transitional または Frameset	ほぼ標準どおりで、行の高さに関するルールが 1 つだけ違います。そのため行に画像だけを置いたとき (主に表のセル内) に、画像の下に隙間ができません
互換モード (quirks mode)	DOCTYPE なし、綴りの誤り、URL なしの HTML 4.01 Transitional など一部の古い DOCTYPE	1990 年代のブラウザを再現します。パーセント指定の高さ、表の文字サイズ、行の高さの扱いが変わります

互換モードは、Web 標準ができる前に書かれたページを作者が見ていたとおりに表示するためにあります。新しいページでは問題の原因にしかなりません。あるページでは効く height: 100% が別のページでは効かない、表がフォントサイズを無視する、といった現象は DOCTYPE がないときの典型的な症状です。

このページのエディタのプレビューは常に標準モードで描画されるので、そこで DOCTYPE を消しても互換モードにはなりません。下のチェッカーは DOMParser を使っていて、ブラウザがファイルを読み込むときと同じルールが適用されます。テキストボックスの DOCTYPE を書き換えると、モードの表示が変わります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

行を消す、<!DOCTYPE html5> と入力する、DOCTYPE の前に単語を書く、のどれを試しても結果は互換モードに変わります。

古い DOCTYPE: HTML 4.01 と XHTML

HTML5 より前の DOCTYPE は、長い公開識別子で DTD ファイルを指定していました。古いサイトの先頭では今でも見かけます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ブラウザがこれらの DTD ファイルをダウンロードしたことはありません。識別子を読んでモードを決めていただけです。HTML 4.01 Strict と XHTML 1.0 Strict は標準モード、Transitional の各バージョンはほぼ標準モード、URL のない HTML 4.01 Transitional は完全な互換モードになります。上のチェッカーに貼り付けて試せます。ただし compatMode はほぼ標準モードを標準モードと同じ CSS1Compat として返すので、BackCompat と表示されるのは完全な互換モードのときだけです。

すでに標準モードのページなら、古い DOCTYPE を <!DOCTYPE html> に置き換えても問題ありません。互換モードだったページは表示が少し変わることがあるので (多くは高さや画像の下の隙間)、変更後に確認しましょう。

DOM の中の DOCTYPE

DOCTYPE は <html> 要素とは別の DocumentType ノードになります。スクリプトからは document.doctype で読み取れ、document.compatMode でページが最終的にどのモードになったかがわかります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode は、公開中のどのサイトでもすぐに確認できる方法です。ブラウザのコンソールを開いて入力するだけです。"CSS1Compat" なら標準モード (またはほぼ標準モード)、"BackCompat" なら互換モードです。

HTML5 の基本テンプレート

DOCTYPE は、どのページも最初に書く最小限の文書の一部です。下の各行にはそれぞれ役割があります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

lang 属性と meta viewport タグにはそれぞれ専用のページがあります。

よくある間違い

DOCTYPE の前に何かがある。 余計な 1 文字、サーバースクリプトのデバッグ用 echo、<!DOCTYPE html> より上の HTML タグがあると、ページ全体が互換モードになります。コメントと空行は問題ありません。
バージョンを付け足す。 <!DOCTYPE html5> や <!DOCTYPE HTML 5> は無効で、互換モードになります。HTML5 の DOCTYPE は <!DOCTYPE html> だけです。
閉じてしまう。 <!DOCTYPE html></!DOCTYPE> は正しい HTML ではありません。宣言に終了タグはありません。
小さなテスト用ファイルで省略する。 DOCTYPE のない試し書きのファイルで追いかけたレイアウトの不具合は、本番のページでは起きないことがあり、その逆もあります。
古い Transitional の DOCTYPE を残す。 何の得もなくページがほぼ標準モードになります。<!DOCTYPE html> に切り替えましょう。

よくある質問

<!DOCTYPE html> は何をしているのですか？

ページが最新の HTML 文書であることをブラウザに伝え、標準モードで表示させます。書かないとブラウザは互換モード (quirks mode) に切り替わり、1990 年代後半のブラウザの不具合を再現するため、一部のレイアウトや高さの計算が変わります。

<!DOCTYPE html> は必須ですか？

なくてもページは表示されますが、HTML の仕様では必須で、ブラウザは互換モードで表示します。1 行目には必ず <!DOCTYPE html> を書きましょう。

DOCTYPE は大文字と小文字を区別しますか？

区別しません。<!DOCTYPE html>、<!doctype html>、<!DocType HTML> はどれも同じ意味です。大文字の DOCTYPE と小文字の html を組み合わせる書き方が一般的です。

DOCTYPE は HTML タグですか？

いいえ。要素ではなく宣言です。終了タグはなく、属性も付けられず、document.body にも現れません。DOM の中では独立した DocumentType ノードで、document.doctype から参照できます。

HTML5 の DOCTYPE はどう書きますか？

<!DOCTYPE html> です。HTML5 では HTML 4.01 や XHTML の長い公開識別子と URL が不要になり、新しいページにはこの短い形だけで足ります。

ページが互換モードかどうかはどう確認しますか？

ブラウザのコンソールを開いて document.compatMode を実行します。"CSS1Compat" なら標準モード (またはほぼ標準モード)、"BackCompat" なら互換モードです。

HTML の DOCTYPE 宣言: <!DOCTYPE html> の意味と書く場所

`<!DOCTYPE html>` とは

書き方のルール

標準モードと互換モード

古い DOCTYPE: HTML 4.01 と XHTML

DOM の中の DOCTYPE

HTML5 の基本テンプレート

よくある間違い

よくある質問

Coddyでコードを学ぼう

<!DOCTYPE html> とは

書き方のルール

標準モードと互換モード

古い DOCTYPE: HTML 4.01 と XHTML

DOM の中の DOCTYPE

HTML5 の基本テンプレート

よくある間違い

よくある質問

Coddyでコードを学ぼう

`<!DOCTYPE html>` とは