HTMLを書き始めると、ファイルの一番上に<!DOCTYPE html>という1行が出てきます。しかし、画面に表示されるタグではないため「何のために必要なの？」「DOCTYPE宣言なしでも動くのでは？」「DOCTYPE htmlでエラーが出る原因は？」と疑問に感じる方も多いはずです。
今回の記事では、
- DOCTYPE宣言とは何か
- DOCTYPE宣言がないとどうなるのか
- HTML5での正しい書き方と記述場所
- DOCTYPE htmlエラーの原因と対策
- 今の時代に覚えておけばよいDOCTYPE宣言
について解説していきます。
DOCTYPE宣言とは？1行でわかる概要
DOCTYPE宣言とは、ブラウザに「このHTML文書はHTMLとして標準的に解釈してください」と伝えるための宣言です。HTML5では、以下の1行を書きます。
<!DOCTYPE html>DOCTYPE宣言は、h1タグやpタグのように画面へ表示される要素ではありません。ブラウザがHTML文書をどの表示モードで解釈するかに関わる、文書の先頭に置く宣言です。
DOCTYPE宣言はHTMLタグではない
DOCTYPE宣言は、HTMLの要素ではありません。そのため、閉じタグも不要です。
<!DOCTYPE html></!DOCTYPE><!DOCTYPE html>DOCTYPE宣言は、HTML文書の先頭に1回だけ書けば問題ありません。
HTML5では短いDOCTYPEでよい
古いHTMLでは、DOCTYPE宣言が長く複雑でした。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">現在のHTMLでは、基本的に以下の短い書き方だけで十分です。
<!DOCTYPE html>古いDOCTYPEを無理に覚える必要はありません。今からHTMLを書く場合は、HTML5の<!DOCTYPE html>を使いましょう。
なぜ必要なの？DOCTYPE宣言なしで起きる表示崩れ
DOCTYPE宣言が必要な理由は、ブラウザの表示モードに関係します。ブラウザには、現在のWeb標準に近い形で表示する「標準モード」と、古いブラウザとの互換性を保つための「互換モード」があります。DOCTYPE宣言がない、または不正なDOCTYPE宣言になっている場合、ブラウザが互換モードでページを表示することがあります。
DOCTYPE宣言なしのHTMLは、ブラウザが互換モードで解釈し、CSSの表示崩れが起きる原因になります。
互換モードとは
互換モードとは、古いWebページをなるべく昔の表示に近い形で見せるためのブラウザの表示モードです。昔のWebページは、現在のHTMLやCSSの仕様と違う前提で作られていることがありました。その古いページを壊さないために、ブラウザはDOCTYPE宣言の有無や内容を見て、標準モードで表示するか、互換モードで表示するかを切り替えます。
DOCTYPE宣言なしで起きやすい表示崩れ
互換モードになると、以下のような表示差が出ることがあります。
- CSSの幅や高さの計算が想定とずれる
- 余白や行間の見え方が変わる
- テーブルや画像の表示が古い仕様に近い挙動になる
- PCでは大丈夫でも別ブラウザでレイアウトが崩れる
たとえば、CSSで幅を指定したボックスが、想定より広く見えたり狭く見えたりする場合があります。
.box {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
}現在のCSSでは、標準的なボックスモデルに従って表示されます。しかし互換モードでは、古いブラウザに近い挙動が一部残るため、意図したレイアウトと違って見えることがあります。DOCTYPE宣言なしでもHTMLがまったく表示されないわけではありません。ただし、表示モードが変わることでCSSの崩れや原因不明のズレが発生しやすくなります。
表示モードはJavaScriptで確認できる
ブラウザがどの表示モードでページを表示しているかは、開発者ツールのConsoleで確認できます。
console.log(document.compatMode);結果がCSS1Compatなら標準モード、BackCompatなら互換モードです。
DOCTYPE宣言を正しく書いているか確認したい場合は、document.compatModeを見ると切り分けがしやすくなります。
【コピペOK】HTML5の正しいDOCTYPE宣言と記述場所
HTML5でWebページを作る場合は、以下の形を使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<h1>ページタイトル</h1>
<p>本文です。</p>
</body>
</html>DOCTYPE宣言は、HTMLファイルの一番上に書きます。
DOCTYPE宣言は1行目に書く
実務では、DOCTYPE宣言はファイルの1行目に書くのが基本です。DOCTYPE宣言の前に、htmlタグ、headタグ、コメント、空白行などを置かないようにします。
<!-- サンプルページ -->
<!DOCTYPE html>
<html lang="ja">
...
</html><!DOCTYPE html>
<!-- サンプルページ -->
<html lang="ja">
...
</html>meta charsetとは役割が違う
DOCTYPE宣言と<meta charset="utf-8">は、どちらもHTMLの先頭付近に書きますが、役割が違います。
| 記述 | 役割 |
|---|---|
<!DOCTYPE html> |
ブラウザの表示モードを標準モードにするための宣言 |
<meta charset="utf-8"> |
HTML文書の文字コードを指定するための記述 |
DOCTYPE宣言は表示モード、meta charsetは文字コード、と分けて覚えると混同しにくくなります。
よくあるDOCTYPE htmlエラーの原因と対策
DOCTYPE宣言は1行だけの短い記述ですが、書き方を間違えるとエディタやバリデーターでエラーになることがあります。ここでは、初心者がよくつまずく原因を整理します。
1行目以外に書いている
DOCTYPE宣言は、HTML文書の先頭に書く宣言です。HTMLタグの後ろやbodyタグの中に書くものではありません。
<html lang="ja">
<head>
<!DOCTYPE html>
<meta charset="utf-8">
</head>
<body>
<p>本文です。</p>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p>本文です。</p>
</body>
</html>DOCTYPE宣言をheadタグ内に書くのは間違いです。headタグより前、htmlタグより前に書きましょう。
スペルが間違っている
DOCTYPE宣言のスペルミスもよくあります。特に、!の付け忘れ、DOCTYPEの文字抜け、htmlの書き忘れに注意してください。
<DOCTYPE html>
<!DOCTPE html>
<!DOCTYPE><!DOCTYPE html>HTMLの仕様上、DOCTYPEやhtmlの大文字・小文字は厳密には区別されません。ただし、実務では読みやすさと一般的な書き方に合わせて<!DOCTYPE html>で統一するのがおすすめです。
全角記号を使っている
日本語入力のまま書いてしまうと、半角の<や>ではなく、全角の＜や＞になることがあります。
＜!DOCTYPE html＞<!DOCTYPE html>HTMLの記号は半角で書きます。全角記号が混ざると、HTMLとして正しく認識されません。
DOCTYPE宣言を複数書いている
DOCTYPE宣言は、1つのHTML文書に1回だけ書きます。テンプレートを結合したり、別ファイルをコピーしたりしたときに、複数入ってしまうことがあります。
<!DOCTYPE html>
<html lang="ja">
...
<!DOCTYPE html>
...
</html>DOCTYPE宣言はファイル先頭に1回だけ置く、と覚えておきましょう。
PHPやWordPressの共通パーツで不要な空白が入っている
実務では、WordPressのheader.phpやPHPの共通テンプレートを使ってHTMLを組み立てることがあります。このとき、DOCTYPE宣言の前に不要な改行やスペースが入ると、ブラウザがHTML文書の先頭を正しく解釈できず、表示モードに影響する場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>上記のように、<!DOCTYPE html>の前に空白行が入っている状態は避けましょう。 また、ファイルの先頭にBOM（Byte Order Mark）と呼ばれる目に見えない文字が入っている場合もあります。エディタ上では気づきにくいため、HTMLやPHPファイルはUTF-8（BOMなし）で保存するのがおすすめです。 WordPressやPHPで共通パーツ化する場合は、DOCTYPE宣言の前に不要な空白行・スペース・BOMが入らないように注意しましょう。
関連記事：「【HTML入門】タグの基本と使い方を解説」
DOCTYPE宣言なしのエラーを確認する方法
DOCTYPE宣言が原因かどうかを確認したい場合は、ブラウザの表示だけで判断せず、開発者ツールやバリデーターも使うと切り分けしやすくなります。
document.compatModeで確認する
Chromeなどの開発者ツールを開き、Consoleで以下を実行します。
document.compatMode表示結果の意味は以下です。
| 結果 | 意味 |
|---|---|
CSS1Compat |
標準モードで表示されている |
BackCompat |
互換モードで表示されている |
BackCompatになっている場合は、DOCTYPE宣言がない、または正しく認識されていない可能性があります。
HTMLバリデーターで確認する
HTMLの構文エラーを確認したい場合は、HTMLバリデーターを使う方法もあります。DOCTYPE宣言の位置やスペルミス、タグの閉じ忘れなどを検出しやすくなります。
画面表示だけでは原因が見えない場合、バリデーターでHTML構文を確認すると修正箇所を見つけやすくなります。
実務で迷うDOCTYPE宣言の扱い
DOCTYPE宣言はシンプルですが、WordPressやテンプレート制作では扱いに迷う場面があります。
WordPressではテーマ側が出力する
WordPressの記事本文に<!DOCTYPE html>を書く必要はありません。通常、DOCTYPE宣言はテーマのheader.phpなどから出力されます。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>WordPressの投稿画面本文にDOCTYPE宣言やhtmlタグ、headタグを直接書くと、テーマのHTML構造と重複する可能性があります。
部品ファイルにはDOCTYPE宣言を書かない
ヘッダーやフッターなどを部品ファイルとして分ける場合、すべてのファイルにDOCTYPE宣言を書く必要はありません。
<?php include 'header.php'; ?>
<main>
<p>本文です。</p>
</main>
<?php include 'footer.php'; ?>この場合、DOCTYPE宣言は最終的に出力されるHTML全体の先頭に1回だけあれば十分です。テンプレート部品を作るときは、完成したHTML全体でDOCTYPE宣言が1回だけ出力されるかを確認しましょう。
公式ドキュメントも確認する
DOCTYPE宣言や互換モードを正確に確認したい場合は、以下の公式ドキュメントも参考になります。
オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTMLを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じることがあります。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を用意しています。
まとめ：今の時代は<!DOCTYPE html>だけでOK
この記事では、HTMLのDOCTYPE宣言について解説しました。
今のHTMLでは、DOCTYPE宣言は<!DOCTYPE html>だけ覚えておけば問題ありません。
DOCTYPE宣言がない、または間違っていると、ブラウザが互換モードで表示し、CSSの表示崩れや原因不明のレイアウト差につながることがあります。HTMLファイルの一番上に、以下の1行を書きましょう。
<!DOCTYPE html>DOCTYPE宣言でエラーが出る場合は、1行目に書いているか、!を付け忘れていないか、全角記号が混ざっていないか、複数回書いていないかを確認してください。また、DOCTYPE宣言は画面に表示するためのタグではなく、ブラウザの表示モードを正しくするための宣言です。小さな1行ですが、HTMLの土台として必ず入れておきましょう。
関連記事：「HTMLタグ一覧｜コピペで使える目的別リファレンス」
