Web制作の学習を進める中で、「HTML」と非常によく似た「XHTML」という言葉に出会い、「この2つの違いは何だろう？」「今はどちらを使うべきなのだろう？」と疑問に思ったことはありませんか。
結論からお伝えすると、XHTMLはHTMLをより厳格なルールで書き直したものであり、年現在のWeb制作においては、HTMLの最新バージョンである「HTML5」を利用するのが標準です。
この記事では、HTMLとXHTMLの基本的な定義から、具体的な記述ルールの違い、それぞれのメリット・デメリット、そしてなぜXHTMLが生まれ、現代では使われなくなったのかという歴史的背景までを徹底的に解説します。
この記事を読めば、HTMLとXHTMLの違いに関する疑問はすべて解消されるでしょう。
 |
|
HTMLとXHTMLの定義の違い
まず、それぞれの言語がどのような目的で、どのような特徴を持っているのか、基本的な定義から見ていきましょう。
HTMLとは
HTML（HyperText Markup Language）は、Webページの構造を定義するためのマークアップ言語です。
普段私たちがブラウザで閲覧しているWebサイトの文章（見出し、段落）、画像、表、リンクといった要素は、すべてHTMLによってその意味や役割が示されています。
HTMLは、Webの土台となる骨格を作る言語といえるでしょう。
HTMLの大きな特徴の一つに、文法的な記述に多少の誤りがあっても、ブラウザ側がある程度その意図を汲み取って柔軟に表示を試みてくれる点が挙げられます。
この寛容さが、多くのWeb制作者に受け入れられてきた理由の一つです。
XHTMLとは
XHTML（Extensible HyperText Markup Language）とは、HTML 4.01を、XML（Extensible Markup Language）という別の言語のルールに則って再定義したマークアップ言語です。
簡単に表現するなら、「XMLをベースにした、非常に記述ルールが厳しいHTML」と考えてください。
XMLはデータの構造を厳密に定義するための言語であり、「少しの文法エラーも許さない」という特徴があります。
XHTMLはこのXMLの厳格さを受け継いでいるため、HTMLに比べてはるかに厳密な記述が求められるのです。
なぜXHTMLが生まれた？
XHTMLが誕生したのは2000年のことです。
当時、なぜわざわざHTMLを厳格なルールで縛る必要があったのでしょうか。
その背景には、1990年代後半のWeb業界の混乱がありました。
当時は「ブラウザ戦争」と呼ばれ、各ブラウザメーカーが独自のHTMLタグを次々と追加していました。
その結果、特定のブラウザでしか正しく表示されないWebページが乱立し、制作者はブラウザ間の表示の違いを吸収するために多大な労力を費やしていたのです。
そこで、より構造が明確で、どんな環境でも正しく処理できる「整形式」な文書を目指すべく、厳格なXMLのルールをHTMLに適用する動きが生まれました。
これにより、プログラムによる自動処理が容易になり、将来にわたって安定的に利用できるWebの実現が期待されたのです。
HTMLとXHTMLの最大の違いは文法と記述ルール
HTMLとXHTMLは、どちらもWebページの構造を記述するという目的は同じです。
しかし、その目的を達成するための「書き方」、すなわち文法と記述ルールに最大の違いがあります。
HTMLが「内容が伝われば、多少の書き方の揺れは許容する」という柔軟な姿勢を持っているのに対し、XHTMLは「定められたルールから少しでも逸脱してはならない」という厳格な姿勢を貫いています。
この思想の違いが、後述する具体的な記述ルールの差となって現れているのです。
この厳格さこそが、XHTMLを理解する上で最も重要なキーワードとなります。
HTMLとXHTMLの文法・記述ルールの違い
それでは、両者の文法や記述ルールが具体的にどう違うのかを、項目別に詳しく見ていきましょう。
タグの使い方
タグの使い方は、両者の違いが最もわかりやすく現れる部分です。
特に、終了タグを持たない「空要素タグ」の扱いに明確な差があります。
HTMLでは、改行を表す<br>タグや画像を表示する<img>タグは、終了タグが不要です。
しかし、XHTMLではすべてのタグを閉じる必要があるため、<br />や<img />のように、タグの末尾にスラッシュを入れて閉じる「自己終了タグ」の形式で記述しなければなりません。
また、pタグなどの終了タグが必要な要素も、必ず</p>で閉じる必要があります。
HTMLでは閉じ忘れが許容されることもありますが、XHTMLではエラーとなります。
文法の厳格さ
文法の厳格さ、特にタグの入れ子（ネスト）構造の正しさに対する要求度が異なります。
HTMLでは、例えば<b><i>テキスト</b></i>のように、<i>タグを閉じる前に<b>タグを閉じてしまうような正しくない入れ子構造になっていても、多くのブラウザで問題なく表示されます。
一方で、XHTMLではこのような誤った入れ子構造は一切許容されません。
必ず<b><i>テキスト</i></b>のように、内側にあるタグから順番に正しく閉じる必要があります。
このルールにより、文書の構造が論理的に保たれ、機械的な解釈が容易になるのです。
大文字表記か小文字表記か
タグや属性名に大文字を使えるかどうかも、明確な違いの一つです。
HTMLでは、タグ名や属性名の大文字と小文字を区別しません。
そのため、<body>と書いても<BODY>と書いても、同じ意味として解釈されます。
しかし、XMLをベースとするXHTMLでは、大文字と小文字が厳密に区別されます。
そして、XHTMLのルールでは、すべてのタグ名と属性名は小文字で記述しなければならないと定められています。
大文字で記述すると、それはエラーとして扱われてしまいます。
属性を省略できるかどうか
HTMLでは一部の属性について、記述を省略することが許されています。
例えば、チェックボックスを最初から選択状態にする場合、HTMLでは<input type="checkbox" checked>のように属性値の記述を省略できます。
また、width=100のように属性値を囲む引用符（"）を省略できる場合もあります。
対してXHTMLでは、いかなる属性の省略も認められません。
前述の例は<input type="checkbox" checked="checked" />のように、属性名と属性値を等しく記述する必要があります。
また、すべての属性値は、必ずwidth="100"のようにダブルクォーテーション（またはシングルクォーテーション）で囲まなければならない、というルールになっています。
DOCTYPE宣言
DOCTYPE宣言は、その文書がどのバージョンのHTML/XHTMLで記述されているかをブラウザに伝えるためのものです。
この宣言の記述方法も異なります。
HTML4.01では、文書の種類に応じて3つのDOCTYPE宣言が存在しました。
一方でXHTML 1.0にも同様に3つの種類がありましたが、それぞれXML宣言を含む、より複雑な形式で記述されます。
ちなみに、現在の標準であるHTML5のDOCTYPE宣言は<!DOCTYPE html>と非常にシンプルになっており、これは過去のバージョンとの後方互換性を保つための工夫の一つです。
HTMLの書き方・サンプルコード
以下に、HTML4.01の比較的緩やかな文法で記述されたサンプルコードを示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
www.w3.org(http://www.w3.org/TR/html4/loose.dtd)">
<HTML>
<HEAD>
<TITLE>HTMLのサンプル</TITLE>
</HEAD>
<BODY>
<H1>これはHTMLのページです</H1>
<P>
HTMLでは、pタグを閉じなくても、次のブロック要素が来れば解釈されることがあります。<br>
imgタグも閉じる必要はありません。
<P>
<img src="sample.jpg" alt="サンプル画像" width=200>
</BODY>
</HTML>このコードでは、タグがすべて大文字で書かれていたり、pタグが閉じられていなかったり、width属性の引用符がなかったりしますが、多くのブラウザはこれを問題なく表示できます。
XHTMLの書き方・サンプルコード
次に、先ほどのHTMLコードを、XHTML 1.0の厳格なルールに則って書き直したサンプルコードを示します。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
www.w3.org(http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="
www.w3.org(http://www.w3.org/1999/xhtml)" xml:lang="ja" lang="ja">
<head>
<title>XHTMLのサンプル</title>
</head>
<body>
<h1>これはXHTMLのページです</h1>
<p>
XHTMLでは、pタグは必ず閉じる必要があります。<br />
imgタグのような空要素タグも、スラッシュを入れて自己終了させます。
</p>
<p>
<img src="sample.jpg" alt="サンプル画像" width="200" />
</p>
</body>
</html>このコードは、XHTMLの厳格なルールに従っています。
タグはすべて小文字で、pタグは閉じられ、空要素タグは自己終了形式になっています。
HTMLのメリット・デメリット
Web制作の標準であるHTMLですが、その特徴からくるメリットとデメリットが存在します。
HTMLのメリット
HTMLの最大のメリットは、その「柔軟性」と「寛容さ」です。
多少の文法ミスがあってもブラウザが表示を試みてくれるため、特に初心者にとっては学習のハードルが低いといえるでしょう。
また、現在の標準であるHTML5は、動画や音声の埋め込み、インタラクティブな要素の作成など、非常に豊富な機能を備えています。
世界中のほぼすべてのWebサイトがHTMLで構築されており、利用できる情報源やコミュニティが圧倒的に多いことも、大きな利点です。
HTMLのデメリット
一方で、メリットである柔軟性はデメリットにもなり得ます。
文法が緩やかであるため、書き手によってコードの品質にばらつきが出やすくなります。
また、ブラウザがエラーを補完して表示するため、制作者が自身のコードの間違いに気づきにくいという側面もあります。
これが、予期せぬ表示崩れや、後々のメンテナンス性の低下に繋がる可能性を否定できません。
クリーンなコードを書くためには、制作者自身の高い意識が求められます。
XHTMLのメリット・デメリット
次に、厳格なルールを持つXHTMLのメリットとデメリットを見ていきましょう。
XHTMLのメリット
XHTMLのメリットは、その「厳格さ」に起因します。
定められたルール通りに記述する必要があるため、誰が書いても文法的に正しく、構造が明確な「整形式」な文書になります。
このような文書は、コンピュータプログラムによる自動的な解釈や処理が非常に容易です。
また、他のXMLベースの技術との連携がしやすいという利点もあります。
記述ルールが厳しいため、コードの品質が一定に保たれやすい点もメリットといえるでしょう。
XHTMLのデメリット
XHTMLの最大のデメリットは、メリットの裏返しである「厳格すぎること」です。
たった一つの文法エラーがあるだけで、一部のブラウザではページ全体の表示が停止してしまうという、非常に大きなリスクを抱えています。
この「All or Nothing（すべてか、無か）」という思想は、Webサイトの安定的な運用を目指す上で現実的ではありませんでした。
また、HTMLに比べて記述が煩雑になり、開発効率が落ちるという側面もありました。
結果として、この厳しさが多くの開発者に敬遠され、普及に至らなかったのです。
Webサイトを制作する際はHTMLを使うべき
これまでの解説を踏まえると、「これからWebサイトを作るならどちらを使うべきか」という問いに対する答えは一つしかありません。
それは、HTML、すなわち現在のWeb標準である「HTML5」を使うべき、ということです。
XHTMLはWebの歴史における重要な技術ではありますが、現在、新規のWebサイト制作でXHTMLが採用されることはありません。
主要なブラウザも、開発者向けのツールも、すべてHTML5を前提に進化を続けています。
ただし、XHTMLが目指した「クリーンで論理的なコードを書く」という思想は、現代のHTML5コーディングにおいても非常に重要です。
タグを正しく閉じる、入れ子構造を整えるといったXHTMLのルールは、そのままHTML5の品質を高めるための「良い習慣（ベストプラクティス）」として受け継がれています。
まとめ
今回は、HTMLとXHTMLの違いについて、定義や記述ルール、それぞれのメリット・デメリットを交えながら詳しく解説しました。
| HTML (HTML5) | XHTML | |
|---|---|---|
| ベース | 独自の文法 | XML |
| 文法 | 柔軟で寛容 | 厳格 |
| 特徴 | 豊富な機能、学習しやすい | 整形式、機械が処理しやすい |
| 現在の状況 | Webの標準技術 | 歴史的な技術（ほぼ使われない） |
XHTMLの歴史を知ることは、なぜ現在のHTML5がこのような仕様になっているのかを深く理解する上で役立ちます。
その思想の良い部分を学びつつ、私たちはWebの未来を担うHTML5の正しい知識とスキルを身につけていくことが重要です。
実務未経験エンジニアでも希望の転職先を見つけやすい！！
週1～3日からできる副業案件多数！！
フリーランス案件の単価の高さは圧倒的！！
