ウェブサイトを作るときに必ず目にする「HTML」と「XHTML」。名前は似ているけれど、一体何が違うんだろう？と疑問に思ったことはありませんか？ この記事では、そんな「html と xhtml の違い」を、10th grade の皆さんにも分かりやすく、そして楽しく解説していきます。
厳格さがポイント！HTMLとXHTMLの基本的な違い
html と xhtml の違いを理解する上で、まず押さえておきたいのが「厳格さ」という点です。HTMLは比較的自由な記述が許されていましたが、XHTMLはXMLという、より厳密なルールに基づいたマークアップ言語として登場しました。この厳格さの違いが、後々説明する様々なルールの違いに繋がってきます。
具体的にどんな違いがあるかというと、例えば以下のような点が挙げられます。
- タグの閉じ方
- 大文字・小文字の区別
- 属性値の記述
これらの違いを理解しておくことは、ウェブサイトが正しく表示され、様々なデバイスやブラウザで互換性が保たれるために非常に重要です。
タグの閉じ方： XHTMLでは必ず閉じなければならない！
html と xhtml の違いの一つに、タグの閉じ方があります。HTMLでは、
これは段落です。
のように、開始タグと終了タグをセットで書くのが基本ですが、中にはや
しかし、XHTMLでは、このような空要素も必ず終了タグを付けなければなりません。例えば、改行タグの
は
、画像の
タグは
のように、スラッシュ（/）を付けて閉じます。これは、XMLのルールに準拠するためです。
このようなルールは、以下のようにまとめられます。
| 要素 | HTML | XHTML |
|---|---|---|
| 改行 | <br> | <br /> |
| 画像 | <img src="file.jpg" alt="説明"> | <img src="file.jpg" alt="説明" /> |
大文字・小文字の区別： XHTMLでは厳密に区別される
html と xhtml の違いとして、大文字・小文字の区別も重要なポイントです。HTMLでは、タグを大文字で書こうが小文字で書こうが、ブラウザはほとんどの場合、同じように解釈してくれました。例えば、
こんにちは
とこんにちは
は、どちらも同じ段落として表示されていました。しかし、XHTMLでは、XMLのルールに従うため、大文字と小文字は厳密に区別されます。そのため、開始タグと終了タグは必ず同じ大文字・小文字で記述する必要があります。例えば、
こんにちは
と書くべきところを、こんにちは
やこんにちは
と書くと、正しく表示されない可能性があります。これは、プログラミングの世界では当たり前のことですが、ウェブ制作においては、HTMLの自由さに慣れていると戸惑うかもしれません。XHTMLでは、以下の点が推奨されます。
- 全てのタグを小文字で記述する。
- 開始タグと終了タグを必ず同じ大文字・小文字で記述する。
属性値の記述： XHTMLでは必ず引用符で囲む
html と xhtml の違いは、属性値の記述方法にも見られます。HTMLでは、属性値を引用符（ダブルクォーテーション " や シングルクォーテーション ' ）で囲むことは必須ではありませんでした。例えば、 リンク のように書くことができました。
しかし、XHTMLでは、XMLのルールに従い、全ての属性値は必ず引用符で囲む必要があります。つまり、 リンク のように、ダブルクォーテーションで囲むことが必須となります。これにより、より明確で間違いのないコード記述が求められます。
このルールを守ることで、以下のようなメリットがあります。
- コードの可読性が向上する。
- ブラウザによる解釈の間違いを防ぐことができる。
- 将来的なウェブ技術への対応が容易になる。
無効なHTML要素の扱い： XHTMLではエラーとなる
html と xhtml の違いは、存在しない、または現在では推奨されていないHTML要素の扱いにも現れます。HTMLでは、たとえ間違ったタグを使っても、ブラウザがなんとか解釈して表示してくれることがありました。しかし、XHTMLは「厳格さ」が特徴であるため、無効な要素や、間違った記述はエラーとして扱われます。
例えば、HTML 4.01 Transitional では、一部の古いタグも許容されていましたが、XHTML 1.0 Strict では、それらは廃止され、使用できなくなりました。これは、ウェブの標準化を進め、よりクリーンで効率的なウェブサイトを作るための取り組みです。
以下に、XHTMLで推奨されない、あるいは廃止された要素の例を挙げます。
-
タグ（文字の色やサイズを変更するため）
タグ（要素を中央揃えするため） タグ（取り消し線を表示するため）これらの表現は、CSS（スタイルシート）を使って行うことが推奨されています。
DOCTYPE宣言： XHTMLでは厳格な指定が必要
html と xhtml の違いとして、DOCTYPE宣言の書き方も挙げられます。DOCTYPE宣言は、その文書がどのバージョンのHTML（またはXHTML）で書かれているかをブラウザに伝えるためのものです。HTMLでは、比較的自由な記述が可能でしたが、XHTMLでは、どのXHTMLバージョンを使用しているかを明確に宣言する必要があります。
例えば、XHTML 1.0 Strict のDOCTYPE宣言は以下のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">このように、XHTMLでは、より厳格で正確なDOCTYPE宣言が求められます。これは、ブラウザが文書を正しく解釈し、期待通りの表示を行うために不可欠です。
DOCTYPE宣言には、いくつか種類がありますが、XHTMLでは主に以下のものが使われます。
- XHTML 1.0 Strict: 最も厳格なDOCTYPEで、古い要素やプレゼンテーションに関する要素が使用できません。
- XHTML 1.0 Transitional: Strictよりも古い要素やプレゼンテーションに関する要素が使用できます。
- XHTML 1.0 Frameset: フレームセットを使用したページで利用されます。
XMLパーサーとの互換性： XHTMLはXMLとして解釈される
html と xhtml の違いは、その根幹にある技術にまで及びます。XHTMLは、HTMLの強力さをXMLの厳格さと組み合わせたものです。そのため、XHTMLで書かれた文書はXMLパーサーによって解釈されます。XMLパーサーは、XML文書を解析し、その構造を理解するプログラムです。XMLは、データ交換や構造化された情報の表現に適しており、その厳格なルールは、データの正確性を保証します。
一方、HTMLは、ブラウザがより柔軟に解釈することを前提としていました。この「柔軟さ」が、時に予期せぬ表示のばらつきを生む原因となっていました。XHTMLがXMLパーサーによって解釈されるということは、コードに少しでも間違いがあれば、それがエラーとして検出されやすくなるということです。これは、ウェブサイトの品質を向上させる上で、非常に重要な点です。
XMLパーサーとの互換性があることで、以下のようなメリットが生まれます。
- ウェブサイトの構造がより明確になり、検索エンジンなどによる解析が容易になる。
- 他のXMLベースの技術（SVGやRSSなど）との連携がスムーズになる。
- 将来的なウェブ技術の進化に対応しやすくなる。
まとめ： XHTMLへの移行でウェブはより洗練された
html と xhtml の違いは、ウェブ制作の歴史において、ウェブの標準化と品質向上を目指した大きな一歩でした。XHTMLの厳格なルールは、当初はウェブ制作者にとって学習コストが高いと感じられることもありましたが、結果として、より正確で、より信頼性の高いウェブサイトを構築するための基盤となりました。現在では、HTML5が主流となっていますが、XHTMLで培われた「厳格さ」の考え方は、HTML5にも引き継がれており、ウェブ制作の基礎として非常に重要です。