DOCTYPE
初級読み方：ドックタイプ｜英語：Doctype
HTMLファイルの1行目に書く宣言で、ブラウザに「これはHTML5です」と伝えるよ。いつ使う？ HTMLファイルを新しく作るとき、必ず最初の行に <!DOCTYPE html> と書くよ。間違いやすいポイント: DOCTYPEを書き忘れると、ブラウザが「互換モード（Quirks Mode）」になって、CSSのbox-sizingや余白の計算がおかしくなることがあるよ。見た目が崩れる原因になるから注意しよう。
やさしい説明
DOCTYPE（ドックタイプ）とは、HTMLファイルの1行目に書く「宣言」です。
たとえば、テストの答案用紙の一番上に「数学」と書いてあると、先生は「数学のルールで採点すればいいんだな」とわかりますよね。DOCTYPEはそれと同じで、ブラウザに「このファイルはHTML5のルールで読んでね」と伝える役割があります。
書き方はとてもシンプル。<!DOCTYPE html> の1行だけです。大文字でも小文字でもOKですが、ファイルの一番最初に書くのがルールです。
これを書き忘れると、ブラウザが「互換モード」という古い表示方法に切り替わります。すると、CSSが思い通りに効かなくなったり、レイアウトが崩れたりします。
昔のHTMLでは長い宣言が必要でしたが、HTML5では <!DOCTYPE html> だけでOKになりました。覚えるのは簡単ですね。
具体例・使い方
HTMLファイルは必ずこの形で始めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>こんにちは！</h1>
</body>
</html>ポイント：1行目の <!DOCTYPE html> が宣言です。これより前に何も書いてはいけません（空行もNG）。
いつ使う？
学校の文化祭のWebサイトを作るとき、最初に書くのがDOCTYPE宣言です。HTMLファイルを新しく作ったら、まず1行目にこれを書きましょう。
VS Codeで ! と入力してTabキーを押すと、DOCTYPEを含むHTMLの雛形が自動で出てきます。
間違いやすいポイント
❌ DOCTYPEの前に空行やコメントを書く
<!-- これはダメ！ -->
<!DOCTYPE html>DOCTYPEの前に何かあると、ブラウザが互換モードになることがあります。必ずファイルの1文字目から書きましょう。
❌ 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: いいえ、タグではなく「宣言」です。閉じタグもありません。ブラウザへの指示書のようなものだよ。
関連用語
📖 関連レッスン
レッスンを見る →