HTML手打ち、DOCTYPE宣言でつまずく

2025年3月14日

こんばんは！IT業界で働くアライグマです！

HTMLを手打ちで書いていると、意外なところでつまずくことがあります。その中でもDOCTYPE宣言は、初心者だけでなく、普段HTMLをあまり意識しないエンジニアでも「何を書けばいいんだっけ？」と迷うことのあるポイントです。

「とりあえず書いておけば問題ない」と思っていたDOCTYPE宣言が、意外にもブラウザのレンダリングやCSSの適用に影響を与えることを知り、苦労した経験がある方もいるのではないでしょうか。

本記事では、DOCTYPE宣言の役割や正しい書き方、つまずきやすいポイントについて詳しく解説します。

Contents

DOCTYPE宣言とは？

DOCTYPE（Document Type Declaration）は、HTML文書の最上部に記述することでブラウザに対して文書の種類を伝える役割を持ちます。主に以下の目的で使用されます。

DOCTYPE宣言を適切に記述しないと、ブラウザが互換モードで動作し、意図しないレイアウト崩れが発生することがあります。そのため、正しく記述することが重要です。

HTML4やXHTML時代は、DOCTYPEの宣言が複雑で、長い文字列を記述しなければなりませんでした。しかし、HTML5では非常にシンプルになりました。

<!DOCTYPE html>

この1行を書くだけで、ブラウザに「HTML5で記述されたページである」と伝えることができます。

HTMLを手打ちしていると、うっかりDOCTYPE宣言を省略してしまうことがあります。この場合、ブラウザは互換モード（Quirks Mode）で動作し、CSSのレイアウトが崩れる原因となる可能性があります。

特に、以下のような影響が出ることがあります。

そのため、HTMLを書く際には、必ずDOCTYPE宣言を最上部に記述するようにしましょう。

HTML4やXHTMLのDOCTYPE宣言は、非常に長く覚えづらいものでした。例えば、HTML4.01のStrictモードの場合は次のように記述する必要がありました。

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

また、XHTML 1.0 Transitionalでは次のようになります。

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

HTML5に慣れた後にこれらのDOCTYPEを見ると、「何が違うのか？」「どれを選べばいいのか？」と混乱してしまうことがあります。しかし、現在はHTML5の<!DOCTYPE html>を使うのが主流であり、これを覚えておけば問題ありません。

HTMLを手打ちする際に、「とりあえず書いておけば問題ない」と考えてDOCTYPEを深く理解せずに使っている人も多いです。しかし、DOCTYPEの有無でブラウザの挙動が大きく変わるため、正しく理解しておくことが重要です。

DOCTYPEを省略するとブラウザの互換モードに入るため、必ず記述しましょう。
HTML5では、以下の1行を最上部に記述するだけで済みます。

<!DOCTYPE html>

HTML4やXHTMLと違い、HTML5ではDOCTYPEがシンプルになっています。古いバージョンのDOCTYPEを使う必要がない場合は、HTML5の宣言を使うのがベストです。

ブラウザのレンダリングモードには、以下の3種類があります。

モード	説明
標準モード	意図したとおりの最新のCSSやJavaScriptが適用される
ほぼ標準モード	ほぼ標準モードと同じだが、特定の挙動に違いがある
互換モード	古いブラウザの互換性を維持するための動作になる（レイアウト崩れの原因になりやすい）

標準モードを適用するためには、正しいDOCTYPE宣言を記述することが必要です。

HTMLを手打ちで書く際に、DOCTYPE宣言は軽視されがちですが、正しく記述しないとブラウザの挙動に大きな影響を与えることがあります。

もしDOCTYPEでつまずいたら、本記事を参考にしながら、適切な記述を心がけてください。HTMLを正しく記述することが、快適なWeb開発の第一歩です。