HTML5 は、W3C ではなく、業界団体の WHATWG(Web Hypertext Application Technology Working Group) が中心となって策定を進め、2008年1月22日に最初のドラフトが発表されて以来、4年半をかけ、2014年10月28日にようやく最終勧告になりました。
先に規約だけを標準化し、実装や互換性はブラウザ開発会社まかせで相互互換性が維持できなかった HTML4.0/HTML4.01 の反省から、HTML5 は、少なくとも2つ以上の実装が登場し、相互の互換性が確認されるまでは標準化(Working Draft から Recommendation へ移行)されなかったようです。
HTML 5 では、HTML4.0/4.01で作成した規約に関して、いくつか変更を加えています。
Web製作者には HTML5 に従って製作することを 「Recomendation(勧告/推奨)」 しますが、オーサリングツールは isindex や font など過去の要素や属性をサポートし続けなくてはなりません。
SGML に従い、HTML から XHTML に移行していくという方向性は破棄されました。今後も HTML構文は残り、ユーザは、HTML構文でも、XML構文でもどちらか好きなほうを選択することができます。
HTML5 の DOCTYPE は <!DOCTYPE html> となります。<DOCTYPE> は、HTML5 に従う場合は必須ですが、従わない場合は必須ではなくなりました。DOCTYPE が記述された場合、ブラウザはその文書を HTML5 標準モードで表示します。DOCTYPE が記載されていない場合は、過去の互換モードで動作することになります。
<!DOCTYPE html>
HTML系の構文と、XHTML系の構文(<～ />)の混在が許されました。HTML構文でも、MathML や SVG などの要素を埋め込むことが許されます。
<!DOCTYPE html> <title>SVG in text/html</title> <p>A green circle: <svg><circle r="50" cx="50" cy="50" fill="green" /></svg> </p>
HTML4.01 に対して、下記 31個の要素が追加されました。
ドラフトで議論されていた下記の要素は採用が見送られました。
下記の要素が廃止されました。
下記の要素は残りました。ただし、b は「太字」ではなく「実利的な理由から注意を引きつける箇所」を示すなど、それぞれの意味づけが行われています。
input要素に下記のタイプが追加されました。
下記の属性がすべての要素で利用可能になりました。
下記の属性は採用が見送られました。
下記などの属性が廃止されました
下記の属性は必須ではなくなりました。
その他にも、いろいろな属性の追加・廃止・変更が行われています。すでにいくつかのブラウザが HTML5 をサポートしていますが、HTML5 自体はまだ Working Draft の状態ですので、今後もまだ変更が行われそうです。
HTML5 では、「ブロック要素」 と 「インライン要素」 という概念は廃止され、代わりに 「カテゴリ」 と 「コンテンツモデル」 の概念が導入されました。7つのカテゴリが定義され、大半の要素は、ひとつまたは複数のカテゴリに分類されます。どのカテゴリにも属さない要素もあります。要素毎に、自分がどんなカテゴリや要素の子になれるか、自分がどんなカテゴリや要素の子を持てるかが決まっています。
| カテゴリ | 説明 | カテゴリに含まれる要素 |
|---|---|---|
| メタデータコンテンツ (metadata) | HTML のヘッダ部に記載する要素群です。 | base / link / meta / noscript / script / style / template / title |
| フローコンテンツ (flow) | HTML4.01 の主なブロック要素と、インライン要素を足したような要素群です。カテゴリに属さない要素とメタデータコンテンツの一部を除くく、すべての要素が含まれています。 | a / abbr / address / area (map要素の子孫の場合のみ) / article / aside / audio / b / bdi / bdo / blockquote / br / button / canvas / cite / code / data / datalist / del / details / dfn / dialog / div / dl / em / embed / fieldset / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / ins / kbd / keygen / label / link(body の中にあるときのみ) / main / map / mark / math / menu / meta(itemprop属性をもつときのみ) / meter / nav / noscript / object / ol / output / p / picture / pre / progress / q / ruby / s / samp / script / section / select / slot / small / span / strong / sub / sup / svg / table / template / textarea / time / u / ul / var / video / wbr / 自律カスタム要素 / テキスト |
| セクショニングコンテンツ (sectioning) | 文書構造・セクションを定める要素群です。 | article / aside / nav / section |
| ヘッディングコンテンツ (heading) | ページやセクションなどの章題を示す要素群です。 | h1 / h2 / h3 / h4 / h5 / h6 / hgroup |
| フレージングコンテンツ (phrasing) | HTML4.01 のインライン要素に近い要素群です。フローコンテンツの中で、特に文章中に出現することのあるコンテンツです。 | a / abbr / area (map要素の子孫の場合のみ) / audio / b / bdi / bdo / br / button / canvas / cite / code / data / datalist / del / dfn / em / embed / i / iframe / img / input / ins / kbd / keygen / label / link(body の中にあるときのみ) / map / mark / math / meta(itemprop属性をもつときのみ) / meter / noscript / object / output / picture / progress / q / ruby / s / samp / script / select / slot / small / span / strong / sub / sup / svg / template / textarea / time / u / var / video / wbr / 自律カスタム要素 / テキスト |
| エンベデッドコンテンツ (embedded) | 埋め込み系の要素群です。 | audio / canvas / embed / iframe / img / math / object / picuure / svg / video |
| インタラクティブコンテンツ (interactine) | 画面から操作可能など、インタラクティブな機能を持つ要素群です。 | a(href属性があるときのみ) / audio(controls属性があるときのみ) / button / details / embed / iframe / img (usemap属性をもつときのみ) / input (type="hidden" 以外のときのみ) / keygen / label / object (usemap 属性があるときのみ) / select / textarea / video (controls属性をもつときのみ) |
また、上記の主要 7カテゴリの他に、下記の分類も定義されています。
| 分類 | 説明 | 分類に含まれる要素 |
|---|---|---|
| パルパブルコンテンツ (palpable) | palpable は「明白な」を意味します。フローコンテンツやフレージングコンテンツを子要素に持つことができる要素です。必須ではありませんが、一般的に一つ以上の子要素を持ちます。 | a / abbr / address / article / aside / audio (controls属性が存在する場合のみ) / b / bdi / bdo / blockquote / button / canvas / cite / code / data / details / dfn / div / dl (子要素として1つ以上の名前-値グループを含む場合) / em / embed / fieldset / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / i / iframe / img / input (type属性が hidden以外の場合) / ins / kbd / keygen / label / main / map / mark / math / menu(子要素が1つ以上のli要素をもつ場合のみ) / meter / nav / object / ol (子要素が1つ以上のli要素を含む場合) / output / p / pre / progress / q / ruby / s / samp / section / select / small / span / strong / sub / sup / svg / table / textarea / time / u / ul (子要素が1つ以上のli要素を含む場合) / var / video / 自律カスタム要素 / 要素内の空白文字でないテキスト |
| スクリプトサポート要素 (script supporting) | スクリプトを記述する要素です。 | script / template |
| トランスペアレント (transparent) | transparentは「透過的」を意味します。この要素が持つことができる子要素は、親要素の振る舞いに準じます。 | 親要素に準じる |
| セクショニングルート (sectioning root) | セクションの始まりとなる要素です。セクション毎に独自のアウトライン(h1～h6の章構成など)を持ちます。 | blockquote / body / details / dialog / fieldset / figure / td |
| フォーム関連 (form-associated) | formに関連する要素です。 | button / fieldset / input / keygen / label / object / output / select / textarea / img |
| リステッド (listed) | form や fieldset要素中に列挙される要素です。 | button / fieldset / input / keygen / object / output / select / textarea |
| サブミッタブル (submittable) | form がサブミットされる際に送信されるデータを保持する要素です。 | button / input / keygen / object / select / textarea |
| リセッタブル (resettable) | <input type="reset"> でリセットすることが可能な要素です。 | input / keygen / output / select / textarea |
| リアソシエイタブル (reassociateable) | form属性で form と関係づけることができる要素です。HTML Living Standard では、リアソシエイタブルの概念はありません。 | button / fieldset / input / keygen / label / object / output / select / textarea |
| ラベラブル (labelable) | label要素と関連付けることができる要素です。 | button / input (type属性が hidden以外の場合) / keygen / meter / output / progress / select / textarea |
HTML5 の要素の包含関係を整理すると、下記の様になります。
□ html ├□ head │├□ base │├□ link │├□ meta │├□ noscript ││├□ link ││├□ style │││└□ スタイルシート ││└□ meta │├□ script ││└□ スクリプト │├□ style ││└□ スタイルシート │├□ template ││└□ テンプレート │└□ title │ └□ テキスト └□ body │ │<!-- フローコンテンツ(フレージングコンテンツ以外) --> ├□ article | aside | footer | header | main | nav | section │└□ フローコンテンツ ├□ h1 | h2 | h3 | h4 | h5 | h6 │└□ フレージングコンテンツ ├□ address | blockquote | div │└□ フローコンテンツ ├□ p | pre │└□ フレージングコンテンツ ├□ hr ├□ dl │├□ dt | dd ││└□ フローコンテンツ │├□ script ││└□ スクリプト │└□ template │ └□ テンプレート ├□ ul | ol │├□ li ││└□ フローコンテンツ │├□ script ││└□ スクリプト │└□ template │ └□ テンプレート ├□ table │├□ caption ││└□ フローコンテンツ │├□ colgroup ││├□ col ││└□ template │└□ thead | tbody | tfoot │ ├□ tr │ │├□ script │ ││└□ スクリプト │ │├□ template │ ││└□ テンプレート │ │└□ th | td │ │ └□ フローコンテンツ │ ├□ script │ │└□ スクリプト │ └□ template │ └□ テンプレート ├□ form │└□ フローコンテンツ ├□ fieldset │├□ legend ││└□ フレージングコンテンツ │└□ フローコンテンツ ├□ figure │├□ figcaption ││└□ フローコンテンツ │└□ フローコンテンツ │ │<!-- フローコンテンツ(フレージングコンテンツ) --> ├□ del | ins │└□ 透過的 ├□ sub | sup │└□ フレージングコンテンツ ├□ audio | video │└□ source | track | 透過的 ├□ img ├□ map │├□ 透過的 │└□ area ├□ area ├□ canvas │└□ 透過的 ├□ embed ├□ iframe │└□ テキスト ├□ object │└□ param | 透過的 ├□ script │└□ スクリプト ├□ noscript │└□ 透過的 ├□ template │└□ テンプレート ├□ input | keygen ├□ button │└□ フレージングコンテンツ ├□ label │└□ フレージングコンテンツ ├□ select │├□ option │└□ optgroup │ ├□ option │ ├□ script │ │└□ スクリプト │ └□ template ├□ textarea │└□ テキスト ├□ meter | progress | output │└□ フレージングコンテンツ ├□ datalist │├□ フレージングコンテンツ │└□ option │ └□ テキスト ├□ abbr | cite | code | data | dfn | em | kbd | mark | q | s | samp | strong | var | time │└□ フレージングコンテンツ ├□ b | i | small | u │└□ フレージングコンテンツ ├□ span │└□ フレージングコンテンツ ├□ ruby │├□ フレージングコンテンツ │├□ rtc ││├□ rt │││└□ フレージングコンテンツ ││└□ フレージングコンテンツ │└□ rb | rt | rp │ └□ フレージングコンテンツ ├□ bdi | bdo │└□ フレージングコンテンツ ├□ br | wbr ├□ a │└□ 透過的 ├□ slot │└□ 透過的 ├□ 自律カスタム要素 │└□ 透過的 ├□ math | svg │└□ 個別 └□ テキスト
余談になりますが、厳格さを主眼とした HTML4.0/HTML4.01 に対して、HTML5 の仕様は、2000年(最初の HTML5 Working Draft が出る 8年前)に私が提唱(?)していた FLEX-HTML1.0(仮称) に近い仕様になっている気がしています。
その他、「最低限2つ以上の実装での相互互換性が確認できるまでは最終勧告にすべきではない(IETF系インターネット標準の常識ですね)」、「<!DOCTYPE> は記述する、しないを選択できるべき」、「XHTMLへの完全移行はあきらめた方がよい」 など、当時私が感じていたことがいくつか実現されており、同じことを考えてくれる人達も居たのだと安心しています。
上記の考えを述べていた頃は、「HTML4.0 の思想をまるでわかっていない」 といろいろ批判も受けたものでしたが、インターネット上の 「デファクト標準」 というものは非常に恐ろしいものです。一度広まったものは、そう簡単には変えることができません。今後出てくる新たな標準も、いかに、現状の 「デファクト標準」 と共存していくか、変更するのであれば、十分なメリットと十分な時間をかけて変更していくことが重要なのだと感じています。