HTMLの基本テンプレートを見ると、いちばん上に <!DOCTYPE html> と書かれていることがあります。DOCTYPE html とは、その文書がHTMLであることを最初に示し、ブラウザが正しいモードで読みやすくするための宣言です。
一見すると難しそうですが、初心者が最初に覚えるべき意味はそこまで多くありません。この記事では、DOCTYPE html の意味、なぜ必要なのか、どこに書くのか、HTMLタグとの違い、書かないとどうなるのかを、前提知識がない方にもわかるように整理します。
DOCTYPE html は「最初に書くお約束」と覚えておけば、最初の理解としては十分です。
結論：DOCTYPE html はHTMLファイルのいちばん上に書く
- HTML文書の先頭に置く
- ブラウザが適切な表示モードで解釈しやすくする
- HTMLタグそのものではなく、先頭の宣言と考えると分かりやすい
つまり、DOCTYPE html は本文の一部というより、このファイルをどう読むかの前置きです。
DOCTYPE html とは何か
<!DOCTYPE html> は、HTML文書のいちばん上に置かれる宣言です。見た目の要素を作るタグではなく、「これから始まる文書はHTMLです」とブラウザへ伝える役割を持っています。
そのため、h1 や p のように本文内容を表すタグとは性質が違います。初心者の方は「タグの仲間」というより、「ファイルの冒頭に置く宣言」と考えるほうが分かりやすいです。
なぜ DOCTYPE html が必要なのか
DOCTYPE html の大きな役割は、ブラウザが文書を正しい表示モードで解釈しやすくすることです。MDN でも、DOCTYPE の目的はブラウザがいわゆる quirks mode へ入るのを防ぎ、仕様に沿った形で表示しようとするためだと説明されています。
初心者の段階では「書かないと必ず壊れる」とまでは考えなくてよいですが、書いておくのが基本であり、テンプレートの先頭に必ず置くものとして覚えるのが安全です。
どこに書くのか
DOCTYPE html は、HTMLファイルのいちばん上に書きます。<html> タグより前です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文です。</p>
</body>
</html>
この順番を覚えておくと、HTMLの基本構造も一緒に整理できます。全体の書き方は HTMLの書き方の基本 とつながっています。
DOCTYPE html と htmlタグの違い
ここは初心者がよく混乱するポイントです。<!DOCTYPE html> と <html> は名前が似ていますが、役割は違います。
| 記述 | 役割 |
|---|---|
<!DOCTYPE html> | 文書の先頭でHTML文書であることを示す宣言 |
<html> | ページ全体を囲む要素 |
つまり、DOCTYPE html は「これから始まる文書の前置き」、htmlタグは「本文全体を囲む外枠」です。
大文字と小文字はどう考えればいいか
WHATWG の HTML Standard では、DOCTYPE は大文字・小文字を区別しない形で扱われます。そのため、<!DOCTYPE html> でも <!doctype html> でも基本的には同じ意味です。
ただ、サイトや教材によって表記が異なると初心者は混乱しやすいので、自分で書くときはどちらかに統一するのがよいです。一般的な学習記事では <!DOCTYPE html> を見ることが多く、MDN のサンプルでは小文字を使うこともあります。
書かないとどうなるのか
DOCTYPE html を省略しても、ブラウザがページをある程度表示することはあります。ただし、表示モードが変わり、意図しないレイアウト差や扱いの違いが出る可能性があります。
初心者の段階では細かいモード差まで追わなくても大丈夫ですが、「書かなくてもいいかも」と考えるより、HTMLファイルの最初に必ず書くのが基本と覚えておくのが安全です。
昔のDOCTYPEと何が違うのか
古いHTMLの解説では、DOCTYPE に長い文字列が続いている例を見ることがあります。現在のHTMLでは、基本的に短い <!DOCTYPE html> を使えば十分です。
つまり、初心者がまず覚えるべきDOCTYPEは、昔の長い書き方ではなく、このシンプルな形です。古い情報を見たときに戸惑わないためにも、「今は短い形が基本」と知っておくと安心です。
HTMLの基本構造との関係
DOCTYPE html は、HTMLの基本構造を学ぶ最初の一歩でもあります。順番としては、DOCTYPE → html → head → body を意識すると整理しやすいです。
そのため、DOCTYPE を単独で暗記するよりも、HTMLファイル全体の流れの中で覚えるほうが定着しやすいです。
よくある疑問
DOCTYPE html はタグですか？
本文を構成する通常のHTMLタグというより、文書の先頭に置く宣言と考えるほうが分かりやすいです。
毎回書く必要がありますか？
HTMLファイルを新しく作るなら、基本的には毎回書く前提でよいです。テンプレートの一部として最初から入れておくのが一般的です。
小文字の doctype でも大丈夫ですか？
はい、基本的には問題ありません。大事なのは表記を統一し、毎回先頭に置くことです。
関連して読みたい記事
まとめ
DOCTYPE html は、HTMLの中でも特に最初に出てくる記述なので、初心者にとっては少し身構えやすい部分です。ただ、役割は「この文書をHTMLとして正しく読みやすくするための宣言」と考えれば十分です。まずはテンプレートの先頭に置く習慣を付けるところから始めてみてください。