DOCTYPE
初級読み方：ドックタイプ｜英語：DOCTYPE
HTMLファイルの1行目に書く宣言で、ブラウザに「これはHTML5です」と伝えるよ。
やさしい説明
DOCTYPE（ドックタイプ）とは、HTMLファイルの1行目に書く「宣言」です。
テストの答案用紙の一番上に「数学」と書いてあると、先生は「数学のルールで採点すればいいんだな」とわかりますよね。DOCTYPEはそれと同じで、ブラウザに「このファイルはHTML5のルールで読んでね」と伝える役割があります。
書き方はとてもシンプル。<!DOCTYPE html> の1行だけです。大文字でも小文字でもOKですが、ファイルの一番最初に書くのがルールです。
これを書き忘れると、ブラウザが「互換モード」という古い表示方法に切り替わります。すると、CSSが思い通りに効かなくなったり、レイアウトが崩れたりします。
具体例・使い方
HTMLファイルは必ずこの形で始めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>こんにちは！</h1>
</body>
</html>VS Code で ! と入力して Tab キーを押すと、DOCTYPE を含む HTML の雛形が自動で出てきます（Emmet という機能）。毎回手書きする必要はありません。
互換モードと標準モードの違い
DOCTYPE 宣言の有無によって、ブラウザの動作モードが変わります。
- 標準モード（DOCTYPEあり） — 現代のHTMLの仕様通りに正しく表示する
- 互換モード（DOCTYPEなし） — 古いブラウザの動作を再現する特殊モード。CSSの計算がズレる
互換モードでは box-sizing の計算方法や margin: auto の中央揃えが正しく動かないことがあります。「レイアウトがなぜか崩れる」と悩んだらまず DOCTYPE を確認しましょう。
昔のDOCTYPE宣言との違い
<!-- HTML4（昔）は長い宣言が必要だった -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 1.0（昔）も長かった -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5（現在）はこれだけ！ -->
<!DOCTYPE html>HTML5 では DOCTYPE 宣言が大幅に簡略化されました。現在は <!DOCTYPE html> の5語だけで十分です。古いコードを参照しているときに長い宣言を見かけても、今から書く HTML には短い形式を使いましょう。
いつ使う？
HTMLファイルを新しく作るたびに、必ず1行目に書きます。VS Code の Emmet（! + Tab）で自動補完されるため、意識しなくても入力される場面が多いです。
間違いやすいポイント
❌ DOCTYPEの前に空行やコメントを書く
DOCTYPE の前に空行・コメント・BOMなど何かがあると、ブラウザが互換モードに切り替わることがあります。必ずファイルの1文字目から書きましょう。
<!-- ❌ これはダメ！（DOCTYPEの前にコメントがある） -->
<!-- サイトのトップページ -->
<!DOCTYPE html>
<!-- ✅ 正しい書き方（1行目から書く） -->
<!DOCTYPE html>
<!-- サイトのトップページ -->❌ DOCTYPEを書き忘れる
書き忘れてもページは表示されますが、CSSの box-sizing や margin の計算がずれることがあります。「なぜかレイアウトが崩れる…」と悩んだら、まず DOCTYPE を確認しましょう。
よくある疑問
Q: DOCTYPEを書き忘れるとどうなる？
A: ブラウザが「互換モード」で表示し、CSSの解釈が変わることがあります。例えばbox-sizingのデフォルトが変わったり、marginの計算がおかしくなったりします。必ず書きましょう。
Q: DOCTYPEの書き方は？
A: <!DOCTYPE html> とHTMLファイルの一番最初に書きます。大文字でも小文字でもOKですが、<!DOCTYPE html> が一般的です。
Q: DOCTYPEはHTMLタグなの？
A: いいえ、タグではなく「宣言」です。閉じタグもありません。ブラウザへの指示書のようなものだよ。
関連用語
📖 関連レッスン
レッスンを見る →