【知識】HTML4、XHTML1.0、HTML5、これらはどう違うの？

文中の説明画像をクリックすると拡大します。

Pocket

HTML4・XHTML・HTML5の概要
Webサイトの構築に使用されているHTMLのバージョンのシェア
まとめ

HTML4・XHTML・HTML5の概要

Webサイトの構築に必要なHTMLは、誕生してから現在まで様々な仕様変更と機能追加が行われてきました。ここで、HTML4からXHTMLを経て、現在最も普及しているHTML5までの歴史を振り返ってみましょう。

HTML4

初期のHTMLはティム・バーナーズ=リーという人物によって設計されました。彼は「WWWの生みの親」や「Webの父」とも呼ばれ、WWW（World Wide Web）を考案した人物でもあります。

HTMLはSGML（Standard Generalized Markup Language）と呼ばれる言語を元に作られており、文書の構造や文書の意味をタグと呼ばれる文字列を使って表現します。

現在、最も普及しているHTML5においても、タグを使用して文書を記述するという方法は、変わらずに取り入れられています。

その後、HTMLはいくつかの進化を経て、1999年12月24日にHTML4.01がW3C（World Wide Web Consortium）により勧告されました。

HTML4の大きな特徴は、デザインと構造の分離が取り入れられたことです。文書の構造はHTMLで記述し、文書のデザイン（見た目）に関する記述はCSS（カスケーディングスタイルシート）を利用するように求められました。

現在は、HTML4で書かれたWebサイトはほとんど全てのブラウザで問題なく表示されます。

HTMLの基本的な知識、HTMLのタグとは何か、については以下のページを参考にご覧ください。

https://wakaru-web.com/web/html/htmlタグ

【基本】CSS（カスケーディングスタイルシート）って何？

CSS（シーエスエス）とは、「カスケーディングスタイルシート」と呼ばれるもので、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。

HTML文書にはDTD（Document Type Definition：文書型宣言）と呼ばれる宣言文を記述する必要があります。ブラウザは文書に書かれているDTDを判別して、Webサイトの表示方法を調節することもあります。

HTML4では主に以下の3つのDTDが存在します。

【HTML 4.01 Strict DTD（非推奨の要素や属性を使えない）】

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

【HTML 4.01 Transitional DTD（非推奨の要素や属性を使える）】

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

【HTML 4.01 Frameset DTD（フレームを使用したページ）】

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

フレームを使用したページというのは、2つ以上のページから構成されているWebページの事です。最近ではすっかり見なくなりましたね。

XHTML

2000年1月に、W3CからXHTML1.0が勧告されました。HTML4がSGMLを元にして設計されていることに対し、XHTMLはSGMLのサブセット（一部の機能を取り入れたもの）であるXMLを元に設計されています。

XHTMLではHTMLに対してXMLの厳密性を取り入れ、XML特有の拡張性や、他のXML技術の利用できるといった特徴があります。

そしてHTML4とXHTMLの大きな違いとして、XHTMLでは文法上の厳しい制約が設けられた点があげられます。またW3CではHTML4とXHTMLの違いについて以下の10項目をあげています。

（参考 Differences with HTML 4）

文書は整形式（開始タグと終了タグの位置が正常な状態）でなければならない
要素名及び属性名は小文字でなければならない
非空要素には終了タグが必要である
属性値は常に引用符（"）で括られなければならない
属性の省略化はしてはならない
meta、hr、br、img などは、空要素として書く
属性値内での改行を含む複数の空白は１つと見なす
スクリプトおよびスタイル要素の定義が異なる
要素の入れ子などSGMLの排除機能を再現できない
「id」および「name」属性をもつ要素は、「id」属性を使用する

さらにXHTMLはXML文書でもあるので、文書の先頭にXML宣言と呼ばれる記述が必要です。しかしこのXML宣言ですが、文書の文字コードがUTF-8の場合は省略しても良いことになっています。

そしてXHTMLにおいても次の3つのDTDが存在します。

【XHTML 1.0 Strict DTD（非推奨の要素や属性を使えない）】

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

【XHTML 1.0 Transitional DTD（非推奨の要素や属性を使える）】

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

【XHTML 1.0 Frameset DTD（フレームを使用したページ）】

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

HTML5

HTML5は2014年10月28日に勧告されました。HTML5は、2018年現在最も普及しているバージョンのHTMLです。HTML5はこれまで進化してきたHTMLの集大成でもあり、無駄な記述を省き、文書の構造をより明確に記述できるようになりました。

HTML5はこれまでのHTMLとは大きく異なる点もあります。HTML5の特徴をまとめてみました。

コンテンツモデルという概念の追加

HTML5より前のHTMLにおいては、タグは「ブロックレベル要素」と「インライン要素」の2つに分類されていました。HTML5ではこの区別を無くし、7つのコンテンツモデルという概念になりました。

メタデータ・コンテンツ - metadata content -（文書の情報や他の文書との関係を示す）
フロー・コンテンツ - flow content -（子孫にテキストなどを持たせる）
セクショニング・コンテンツ - sectioning content -（見出しと概要を付けるもの）
ヘディング・コンテンツ - heading content -（セクションの見出しになるもの）
フレージング・コンテンツ - phrasing content -（段落に含まれる文節・語句）
エンベディット・コンテンツ - embedded content -（文書中に他のリソースを埋め込む）
インタラクティグ・コンテンツ - interactive content -（ユーザーが操作するもの）

要素の役割を表すタグの追加

HTML5より前のHTMLでは、レイアウトを構築する時に、主にdivタグでページ内の領域・グループなどを区切るケースが多かったと思います。しかしHTML5では、文書中で役割を表すタグが追加されたことで、divタグだけではなく、より文章構造を明確に示すタグを利用できるようになりました。

例えば、ヘッダーならheaderタグ、フッターならfooterタグといった具合です。これらを使う事で無駄なdivタグを使わずにHTMLもCSSもシンプルに記述できます

様々なAPIの追加

HTML5ではブラウザ上でインタラクティブな表現を行うための様々なAPIが用意されています。APIとはApplication Programming Interfaceの略語で、プログラミングをする時に利用できる様々な機能のことです。

HTML5で各種APIを使用するためにはJavaScriptを使う必要がありますが、これを利用する事でドラッグ＆ドロップの機能や、閲覧者の位置情報を利用した機能も使用できます。

シンプルなDTD

HTML5におけるDTDはシンプルに1つだけと決まっています。それが、

<!DOCTYPE html>

です。DTDにこれが記載されていることで文書がHTML5で記述されていることがわかります。

Webサイトの構築に使用されているHTMLのバージョンのシェア

Webサイトを構築するにあたり、どのバージョンのHTMLが使われているか調査したデータがあります。（参考サイト）

上記サイトのデータによると、Webサイトの構築に使われているHTMLのバージョンのシェアの上位3つは

HTML5：51.6%
XHTML1.0 Transitional：31.4%
HTML4.01 Transitional：9.8%

という結果でした。約半数がHTML5を使用してWebサイトを構築していますが、XHTMLを使用しているWebサイトも30%ほどありました。

これは、HTML5がInternet Explorer 8以前のバージョンに対応しておらずHTML5の導入に踏み切っていない、あるいはXHTMLサイトで現状特に困っていないためHTML5への以降の必要性を感じていない企業もあるから、かもしれません。

まとめ

HTML4でWebサイトの構築に必要な文法が揃った。
XHTMLはXMLをベースにしてより厳格な文法が求められる。
HTML5は無駄をなくし、よりシンプルに、より明確に書けるようになった。

Pocket