「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめフラップイズム

※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。
※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。

どうも、くーへいです。
今日はある方からリクエストされた記事を書こうかと思います。

皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？
実際には案件ごとに使い分けているかもしれませんね。
この投稿では、それぞれの違いについて、考えていきたいと思います。

※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。
例えば、「<html>・・・</html>」は要素ですが、「<html>」や「</html>」はタグと呼びます。
特に、「<html>」を開始タグ、「</html>」を終了タグと呼びます。

違いを簡単にまとめると・・・

今回は珍しく、まとめから入ります。
ざっくり違いをまとめると以下のようになるかと思います。

「HTML 4.01」

対応しているブラウザが多い
記述方法に比較的決まりごとが少ない
独自の要素（タグ）を定義する（厳密にいうと、他の名前空間を持ち込む）ことができない

いわゆる普通の、従来のHTML言語です。

doctype宣言は、
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
のいずれか。

特徴は何より対応しているブラウザが多いこと。
しかし、動きのあるサイトを構築することは、「JavaScript」などを用いなければ難しいでしょう。

「XHTML 1.0」

対応しているブラウザが多い
記述方法に決まり事が多い
独自の要素（タグ）を定義（厳密にいうと、他の名前空間を持ち込む）ことができる

doctype宣言は、
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
のいずれか。
XML宣言をdoctype宣言の前に行うことが強く推奨されています。

「HTML 4.01」から派生しただけあって、特徴も似ています。
しかし、記述方法に関してはかなり厳密です。
その代わり、要素（タグ）を拡張することができるのが最大の特徴です。（※他の名前空間を持ち込める、という表現の方が正しいとのコメントを頂きました）

（その機能を使っている人はほとんど見ませんが・・・）

「HTML5」

一部のブラウザでは対応しておらず、対応済みのブラウザでもすべての機能は対応していない
記述方法に関して比較的決まりごとが少ない
他の言語やファイルの埋め込みに対して柔軟に対応できる
検索エンジン等がウェブサイトの構造をより詳しく把握できるようになった

新しいHTMLですね。

doctype宣言は、
<!DOCTYPE html>
です。
宣言は上記2つのバージョンと同様に必須ですが、もし宣言を省略すると、ブラウザが「HTML5」と認識できない可能性があります。

動きのあるサイトを実現できるように、要素（タグ）が拡張されました。
また、「ウェブブラウザ」や「検索エンジン」がサイトの構造を理解できるような要素も追加されています。
仕様こそ策定されたものの、W3C（HTML標準化団体）による「勧告」はまだ行われておらず、「勧告候補」の状態です。（勧告とは、自信を持って使用をお勧めするよ！という意味があると思います）
対応ブラウザについても、要素ごとにばらつきがあり、完全に対応しているとは言い難いですが、全てのブラウザが「HTML5」への対応に向かっています。

どれを使えばいいか？

現状では、「HTML5」の基本的な機能は、IE9以降およびその他の主要ブラウザは対応していると言えます。
何らかの事情でIE8以下への対応を迫られるケースを除き、「HTML5」を使用するべきです。
IE8以下へも「JavaScript」を用いれば対応可能です。

それでは、ここからは詳しく書いていきます！

それぞれの策定に至った背景と狙い

「HTML」とは、HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略です。
コーディングをしたことがある人ならわかるかと思いますが、「ハイパーテキスト」とは、複数の文章をつなぎ合わせる、いわゆる「リンク」のようなものを指します。

「HTML」の前身は「SGML」という言語で、「SGML」はもともとは軍艦などのマニュアルを閲覧しやすくし、長期間保存することが目的でした。
その「SGML」に前述の「ハイパーテキスト」の要素を足したものが「HTML」と言えるでしょう。

「HTML」自身は、最初のバージョンとなる「HTML 1.0」が誕生してから幾度となく仕様変更を重ね、1999年の年末に「HTML 4.01」が策定され、これが普及しました。

「XHTML」は、「HTML」に「XML」の要素を追加したものです。「拡張可能なHTML」とも言われます。
他の言語の組み込みを可能にし、いわゆる「リッチな」言語として「XHTML 1.0」が2000年に策定され、勧告されました。

ちなみに、策定や勧告をするのは、「W3C」というWWWで使用される技術を標準化する団体が行っています。

「HTML 4.01」や「XHTML 1.0」は長年使用されてきましたが、ユーザーは次第にウェブサイトに動きを求めるようになり、その求めに応じたのが「Flash」でした。
「Flash」は爆発的な広がりを見せましたが、クラッシュや看過できない脆弱性といった問題が相次ぎ、「Flash」に依存しない、動きのあるウェブサイトを求める声が高まりました。

「W3C」はこれに対応するものとして「XHTML 2.0」の策定を開始しましたが、既存の「HTML」への互換を破棄する、方針が二転三転するなどし、迷走。
「XHTML 2.0」に反対した「Apple」、「Mozilla」「Opera」などが中心となり、新たな標準化団体「WHATWG」を設立し、独自に策定が進められたのが「HTML5」でした。

「W3C」は結局2009年に「XHTML 2.0」を破棄し、「HTML5」の策定に一本化し、2012年の年末に仕様策定が終了、2014年に勧告予定です。
そう、実は「HTML5」はまだ「勧告候補」であり、「勧告」はされていません。
とはいえ、このまま勧告されることは間違いないでしょう。

「HTML 4.01」とは

ここからは各言語について詳しく書いていきます。

「W3C」の仕様書によると、「HTML 4.0」及び「HTML 4.01」の目的として、以下のように書かれています。

国際化の達成
身体的な限界を持つ人々に対してWebページをよりアクセスしやすくできるよう設計すること
新たな表（グループ化など）を実装できること
一般メディアオブジェクト及びアプリケーションをHTML文書に組み込む機構を実装すること
見た目に関する記述をスタイルシートとして外部化すること
スクリプトを外部化すること
印刷できること

「HTML 4.01」は、ある意味スタンダードな「HTML」と言えます。

記述に関する特徴は以下の通り。

文書型宣言（<!DOCTYPE ・・・>というやつ）が”必須”
<HTML>、<HEAD>、<BODY>といった要素は開始タグ・終了タグともに省略可能で、ほとんどの要素の終了タグは省略できる（要素によって省略できるものやできないものがあるので、注意）
要素の大文字と小文字は区別されない（<html>と<HTML>は同じものと扱われる）

「XHTML 1.0」とは

「XHTML」は、「XML」と「HTML」を融合したもので、拡張可能なマークアップ言語と言われます。

つまりは、「HTML」をベースとして、新たな要素（タグ）を追加すること（※）も可能な言語です。（※他の名前空間を持ち込めるという表現が正しいという意見を頂きました。）
例えば、「XML」ベースで策定されている、ベクター画像を扱うための形式「SVG」は「HTML 4.01」では使用できませんが、「XHTML 1.0」では使用できます。
もちろん、「XTHML 1.0」にて策定されている要素ではありません。
これが、「XHTML 1.0」の特徴でしょう。

記述方法としては、「HTML 4.01」より厳密です。

要素は小文字でなければならない
タグの省略ができない
属性値は必ず引用符で囲う（<table rows=”3″>という感じで）
属性の省略記法はサポートされない（<dl compact>はダメ。<dl compact=”compact”>と書く）
空要素は終了タグを記載するか、/>で終了する（<br/>もしくは<br></br>はいいが、<br>はダメ）
他にもいろいろ・・・

この厳密さによって、拡張可能性が保たれています。

「HTML5」とは

「HTML5」は、人間にも、コンピューターにも馴染みやすい言語とすることが目的とされました。
ここで人間とは「コーダー」や「フロントエンドエンジニア」などウェブサイトを作る人であり、コンピューターとは「ウェブブラウザ」や「検索エンジンのクローラー」を指し示す、と考えられます。

また、動きのあるウェブサイトを作るための要素もいくつか追加されています。
例えば、video要素は従来のimg要素を扱うように、動画を扱うことができますし、<canvas>ではJavaScriptと連携して図形を描くことができます。

文章構造にも手が入れられました。
今までは<div id=”gnav”>・・・ナビゲーション・・・</div>などと記載していましたが、<nav>・・・ナビゲーション</nav>として記載することで、「ウェブブラウザ」や「検索エンジン」にそれがナビゲーションであると指し示すことができます。

一方で、削除された要素もあります。
例えば、<font>要素はCSSで代替できるため、「HTML5」では削除されています。
属性である「align」も削除こそされませんでしたが、非推奨となりました。

以下に追加・変更・削除された要素や属性を記載しておきます。
（※注意：HTML5はまだ勧告されておらず、最近でも若干の変更が見られます。下記は2013年3月28日に発表された、「Differences from HTML4」を抜粋したものです。また、赤字”example“は前述の仕様書から2014年2月4日発表の仕様書までに追記された事項、打ち消し線”~~example~~“は記述が削除されたものを示す。）

追加された要素

section・・・セクション
article・・・記事
main・・・メインコンテンツ
aside・・・ページと関連性の薄いコンテンツ
~~hgroup・・・セクションのヘッダー~~
header・・・前置きやナビゲーションが内包されたグループ
footer・・・ウェブ製作者、コピーライトが内包されたグループ
nav・・・ナビゲーション
figure・・・自己完結するフロー・コンテンツ（図表）
figcaption・・・figureのキャプション
video・・・映像のコンテンツ
audio・・・音声のコンテンツ
source・・・video、audioのURLや種類の指定
track・・・video要素のテキスト・トラック
embed・・・プラグイン・コンテンツ
mark・・・参照を目的としたテキストへのマークやハイライト
progress・・・タスクの完了度（ダウンロードや重い処理を実行する場合）
meter・・・ディスク使用率などの計測結果
time・・・日時
data・・・独自データ
dialog・・・閲覧者が操作可能な入力ウインドウ
ruby、rt、rp、rb、rtc・・・ルビ注記
bdi・・・前後のテキストから隔離したいテキストの範囲
wbr・・・改行しても良い位置
canvas・・・動的なビットマップ画像
menuitem・・・ポップアップメニュー
details・・・ユーザーが要求に応じて得られる追加情報やコントロール
summary・・・detailsの概要や説明、キャプション
datalist・・・listやinputと一緒に使用してコンボ・ボックスを作ることができる（テキストボックスをクリックした際に表示される履歴に、任意で候補を追加できる）
keygen・・・キーのペアを生成
output・・・計算結果

inputのtypeに指定できるもの

tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color

追加された属性

a、area要素：download属性・・・ダウンロードして保存することを促す
~~a、area要素：ping属性・・・pingを送信~~
area要素：hreflang、type、rel属性・・・a要素とarea要素との整合性を取るため
base要素：target属性・・・a要素との整合性を取るため
meta要素：charset属性
table要素：sortable属性
th要素：sorted属性
input (type属性がhiddenの場合を除く)、select、textarea、button要素：autofocus属性
input、textarea要素：placeholder属性・・・テキストボックスなどで、入力例などを薄いグレーで表示されていることがありますが、それをHTMLで指定できる
input、output、select、textarea、button、label、object、fieldset要素：form属性・・・form要素に入っていない要素を関連付けることができる。つまり、自由な位置にフォームのパーツを配置できる
input (type属性がhidden、image、submitのようなボタンを除く)、select (最初のoption要素が空の値を伴うプレースホルダ―である必要がある)、textarea要素：required要素
fieldset要素：disabled属性・・・子孫の要素も含めて無効化できる (legend要素の子孫は除く)
fieldset要素：name属性
input要素：autocomplete、min、max、multiple、pattern、step属性・・・入力の制約を指定できる
input要素：list属性・・・datalist要素とともに使用可能
input要素：minlength属性
input要素：(type属性がimageの場合) width、height属性
input、textarea要素：dirname属性・・・フォーム送信時にクエリに付加できる、文字列の方向を示す値 ltr, rtl の名前 (コメントで説明を頂いたので、変更しました)
textarea要素：maxlength、minlength、wrap属性・・・最大入力文字数、送信時の改行の挙動を設定できる
form要素：novalidate属性・・・フォームのバリデーションを無効化
input、button要素：formaction、formenctype、formmethod、formnovalidate、formtarget属性・・・form要素におけるenctype、method、novalidate、target要素の動きを上書きする
input、textarea要素：inputmode属性
menu要素：type、label属性・・・~~contextmenu属性~~と組み合わせることで、コンテキストメニューが提供するような、入力可能なユーザーインターフェイスを見つける (原文を直訳したものの、意味がわからず)(contextmenu属性は削除された)
button要素：menu属性・・・ポップアップメニューと一緒に使う
style要素：scoped属性・・・スタイルシートの適用範囲を限定することができる
script要素：async属性・・・スクリプトのロードと実行に影響
html要素：manifest属性・・・WEBアプリケーションAPIと一緒に使用して、キャッシュの使用ルールを設定する
link要素：sizes属性・・・rel属性でiconを使用した場合、そのサイズを指定できる
ol要素：reversed属性・・・リスト番号を降順にできる
ol要素：type属性・・・リストマーカーの種類を指定できる(“1”; “a”; “A”; “i”; “I”)
iframe要素：sandbox、seamless、srcdoc属性・・・ブログコメントのようなコンテンツを実現する
object要素：typemustmatch属性・・・外部のリソースを安全に埋め込む
img要素：crossorigin属性・・・CORS認証を使用して、問題が無ければ画像をcanvas APIとして読み込むことを許可する (原文を直訳したものの、意味がわからず)
script要素：crossorigin属性
link要素：crossorigin属性
img要素：srcset属性・・・解像度や拡大率の異なる複数の画像をサポートする
template要素

新たに追加されたグローバル属性（どの要素にも指定可能な属性）

accesskey、class、dir、id、lang、style、tabindex、titleがグローバル属性へ変更
contenteditable属性
contextmenu属性
data-*属性
draggable、dropzone属性
hidden属性
inert属性
role、aria-*属性
spellcheck属性
translate属性
onblur、onerror、onfocus、onload、onresize、onscroll属性

変更された要素

address・・・article、body要素によって適用範囲が限定される
b・・・特別な重要度をクローラー等に伝達しなくなる
cite・・・単独で作品のタイトルを表すようになる
colgroup・・・script-supporting elements（script、template要素）を含むことができる
dl・・・名前と値のグループの関連リストを示し、会話には適さなくなった
hr・・・段落レベルの区切りを表す
i・・・声やムードの中のテキストの範囲を示し、それ以外では通常の文から区別するために使用する
label・・・基本的に、そのラベルからコントロールにフォーカスを動かすことは推奨されない
menu・・・ツールバーやポップアップメニューに使えるよう再定義された
noscript
s
script
small
strong
u

削除された要素

CSSで代替できるもの

basefont
big
center
font
strike
tt

ユーザビリティ等に悪影響を及ぼすもの

frame
frameset
noframes

他の要素で代替できるもの

acronym・・・abbr要素で代替
applet・・・object要素の使用を推奨
isindex・・・フォームコントロールに置き換え
dir・・・ul要素の使用を推奨

削除された属性

link、a要素：rev、charset属性
a要素：shape、coords属性
img、iframe要素：longdesc属性
link要素：target属性
area要素：nohref属性
head要素：profile属性
html要素：version属性
img要素：name属性（代わりにid属性を使うこと）
meta要素：scheme属性
object要素：archive、classid、codebase、codetype、declare、standby属性
param要素：valuetype、type属性
td、th要素：axis属性
td要素：abbr、scope属性
table要素：summary属性
button要素：disable属性

CSSで代替できるもの

align属性
alink、link、text、vlink属性
background属性
bgcolor属性
object属性：border要素
cellpadding、cellspacing属性
char、charoff属性
clear属性
compact属性
frame属性
frameborder属性
td、th要素：height属性
hspace、vspace属性
marginheight、marginwidth属性
noshade属性
nowrap属性
rules属性
scrolling属性
hr要素：size属性
li、ul要素：type属性
valign属性
hr、table、td、th、col、colgroup、pre要素：width属性

※「<MARQUEE><blink>が書かれて無い」というコメントを頂きましたが、調べてみたところ、<marquee>要素は「HTML5」でも存在しました。<blink>要素は削除したという記述はありませんが、「HTML5」の仕様書には掲載されていません。

最後に

今回の記事を書くに当たり、マークアップ言語をいろいろ調べましたが、新たな発見があるものですね。
日々の業務に追われていると、自分たちが使っている技術が「なぜ生まれたのか」、「どういうためのものか」といったことを忘れがちです。
しかし、そういった裏事情まで把握することで、お客さんやデザイナーに説明することができますし、何より自分が使用したり学んだりする技術で悩まずに済むのではないでしょうか。

「HTML」は深いですねぇ・・・。