現代のHTML5では「<!DOCTYPE html>」と書くだけですが、かつてのHTML 4.01やXHTML 1.0の時代には、「PUBLIC」や「DTD」といった単語やURLを含む長大な宣言文を記述するのが当たり前でした。
「あの長いコードにはどんな意味があったの？」「Transitionalってどういう意味？」「昔のコードを見かけたときはどう対処すればいいの？」
この記事では、かつて標準として使われていたHTML 4.01とXHTML 1.0の文書型宣言（DOCTYPE宣言）の仕組みやパーツの意味、歴史的背景を分かりやすく解説します。
昔のHTMLに書かれていた長い呪文のようなDOCTYPE宣言
まずは、2000年代初頭から2010年代前半にかけて広く使われていた代表的な2つの文書型宣言を確認してみましょう。
<!-- HTML 4.01 Transitionalの文書型宣言（昔の記述） -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">現代の感覚から見ると非常に長く、暗記して手入力するのはまず不可能な記述量です。当時のWeb制作者は、エディタのテンプレート機能を使ったり、過去のファイルからコピー＆ペーストして使っていました。
長いDOCTYPE宣言を構成するパーツの意味を分解する
この長い宣言文は、適当な文字列が並んでいるわけではありません。それぞれのパーツに明確な意味と役割がありました。
HTML 4.01 Transitionalのコードを4つの要素に分解して見ていきましょう。
HTML 4.01 Transitionalの構成要素
- <!DOCTYPE HTML：これから始まる文書のルート要素が「HTML」であることを宣言
- PUBLIC：その仕様書（DTD）が国際的に一般公開された標準規格であることを明示
- “-//W3C//DTD HTML 4.01 Transitional//EN”：「形式的公開識別子（FPI）」と呼ばれる仕様の正式名称
- “http://www.w3.org/TR/html4/loose.dtd”：「システム識別子」と呼ばれる仕様定義ファイル（DTD）の所在URL
形式的公開識別子（FPI）の内訳
引用符で囲まれた「-//W3C//DTD HTML 4.01 Transitional//EN」という文字列は、区切り文字「//」によってさらに細かく情報が埋め込まれています。
- 「-」：ISOなどの公的規格ではなく、民間の標準化団体による規格であることを示す記号
- 「W3C」：その仕様を定めた組織名（World Wide Web Consortium）
- 「DTD HTML 4.01 Transitional」：文書型定義（DTD）の名称とバージョンおよび種類
- 「EN」：そのDTDファイルが記述されている言語（English：英語）
DTD（文書型定義）とは何か？
末尾に書かれている「loose.dtd」などのDTD（Document Type Definition：文書型定義）とは、「このHTMLの中ではどのタグが使えて、どのタグの内側にどの要素を入れてよいか」という文法ルールを定義した仕様書ファイルのことです。
当時のブラウザーはこのURLを参照し、ページが仕様に沿って正しく書かれているかを照合する仕組みになっていました。
なぜ「Transitional（過渡期）」が主流として選ばれたのか
昔のHTMLやXHTMLには、制作方針に応じて3つの異なる種類（DTD）が用意されていました。
当時用意されていた3つの文書型
- Strict（厳密型）：非推奨となった古いデザイン用タグを一切禁止し、装飾はすべてCSSで行うことを強制する最も厳格な仕様（strict.dtd）
- Transitional（移行型・過渡期型）：従来の古いデザイン用タグを許容しつつ、段階的にCSSへ移行するための柔軟な仕様（loose.dtd）
- Frameset（フレームセット型）：画面を複数の領域に分割して別々のページを表示する「フレーム構造」専用の仕様（frameset.dtd）
Transitionalが圧倒的に普及した現場の理由
W3Cの理想としては、厳格な「Strict」を使って文書構造とデザインを完全に切り分けることが推奨されていました。
しかし、当時の制作現場では「<font>」タグや「<center>」タグ、テーブルタグ（table）を使ったレイアウトが広く普及していました。もしStrictを指定してしまうと、これらのタグがすべて文法エラーとして扱われてしまい、既存の制作手法が通用しなくなってしまいます。
そこで、「古いデザインタグも問題なく解釈するけれど、これから作る部分はできるだけCSSを使ってね」という妥協案・救済措置として作られたのが「Transitional（過渡期）」でした。
その柔軟性と実用性の高さから、インターネット上の大多数のWebサイトがTransitionalを採用することになったのです。
HTML 4.01とXHTML 1.0の違い：SGMLからXMLへの進化
提示されたコードの2行目にある「XHTML 1.0 Transitional」は、HTML 4.01をベースにしながら、XMLの文法規則を取り入れて再設計された仕様です。
両者にはいくつかの明確な違いがあります。
大文字・小文字の扱い
HTML 4.01はSGMLをベースにしていたため、大文字と小文字を区別しませんでした。そのためDOCTYPE宣言も「<!DOCTYPE HTML …」と大文字で書かれるのが通例でした。
一方、XHTML 1.0はXMLベースであるため、大文字と小文字が厳格に区別されます。タグ名や属性名はすべて小文字で書かなければならず、DOCTYPE宣言も「<!DOCTYPE html …」と小文字で記述します。
終了タグと空要素の記述ルール
XHTMLでは、すべての要素に終了タグ（閉じタグ）が必須となりました。
- HTML 4.01：
<br>、<img src="pic.jpg">（閉じタグなしで記述可能） - XHTML 1.0：
<br />、<img src="pic.jpg" />（末尾に半角スペースとスラッシュを付与して閉じる）
また、属性値の省略も禁止され、HTML 4.01で可能だった <input type="checkbox" checked> は、XHTMLでは <input type="checkbox" checked="checked" /> と書く必要がありました。
歴代DOCTYPE宣言の構造と役割の変遷
現代のWeb制作でこの長いDOCTYPEを見かけたときの対処法
昔に作られたコーポレートサイトの運用保守や、古いWebシステムの改修・リニューアルを担当する際、この長大なDOCTYPE宣言と対面することがあります。
もし現代的なHTML5へ移行する場合、以下の手順と注意点を押さえて作業を進めます。
HTML5への更新手順と確認ポイント
- 1行目の長い宣言文を削除し、
<!DOCTYPE html>に書き換える - 文字コードの指定を
<meta charset="utf-8">に簡素化する - 古いデザインタグ（<font>, <center>等）が残っていないか確認し、CSSスタイルへ置き換える
- ブラウザーで再読み込みし、表示崩れや余白のズレが発生していないか目視で確認する
DOCTYPE宣言を書き換えてもブラウザーは引き続き「標準モード」で動くため、基本的には表示が大きく崩れることは稀ですが、古い独自タグや属性（align属性など）を整理していくことで、保守性の高い現代的なWebサイトへと生まれ変わります。
まとめ：DOCTYPE宣言の歴史を知ることでHTMLの理解が深まる
現代のHTML5において、たった1行「<!DOCTYPE html>」と書くだけで済むようになったのは、先人たちが複雑なDTD管理や文法規則の試行錯誤を重ねてきた歴史があるからです。
過去の仕様（HTML 4.01やXHTML 1.0）の設計思想を知っておくと、既存サイトのメンテナンス時にも慌てず対応でき、なぜ現在のWeb制作がこのようにシンプルなルールになっているのかを深く理解することができます。
古いソースコードに出会ったときは、ぜひ「過渡期を支えた歴史的なコード」としてその役割を紐解いてみてください。
