HTML5

HTML5の概要

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.2 - https://www.w3.org/TR/2017/REC-html52-20171214/
HTML 5.1 2nd Edition - https://www.w3.org/TR/2017/REC-html51-20171003/
HTML 5.1 - https://www.w3.org/TR/2016/REC-html51-20161101/
HTML 5 - http://www.w3.org/TR/2014/REC-html5-20141028/

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>
```

HTMLタグ・属性の追加と削除

HTML4.01 に対して、下記 31個の要素が追加されました。

section / article / aside / header / footer / nav / figure / figcaption / audio / video / source / track / embed / mark / progress / meter / time / ruby / rt / rp / rb / rtc / bdi / wbr / canvas / sammary / datalist / keygen / output / main / data

ドラフトで議論されていた下記の要素は採用が見送られました。

command / details / hgroup

下記の要素が廃止されました。

basefont / big / center / font / strike / tt / frame / frameset / noframes / acronym / applet / isindex / dir

下記の要素は残りました。ただし、b は「太字」ではなく「実利的な理由から注意を引きつける箇所」を示すなど、それぞれの意味づけが行われています。

b / i / u / s / small / strong

input要素に下記のタイプが追加されました。

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

下記の属性がすべての要素で利用可能になりました。

class / id / style / title / dir / lang / accesskey / tabindex / contenteditable / contextmenu / hidden / spellcheck / title / translate / data-*

下記の属性は採用が見送られました。

contextmenu / draggable / dropzone / data-*

下記などの属性が廃止されました

align / valign / link / text / alink / vlink / background / bgcolor / cellpadding / cellspacing / compact / hspace / vspace / marginright / marginleft / scrolling

下記の属性は必須ではなくなりました。

table の summary / img の alt

その他にも、いろいろな属性の追加・廃止・変更が行われています。すでにいくつかのブラウザが HTML5 をサポートしていますが、HTML5 自体はまだ Working Draft の状態ですので、今後もまだ変更が行われそうです。

カテゴリとコンテンツモデル

HTML5 では、「ブロック要素」と「インライン要素」という概念は廃止され、代わりに「カテゴリ」と「コンテンツモデル」の概念が導入されました。7つのカテゴリが定義され、大半の要素は、ひとつまたは複数のカテゴリに分類されます。どのカテゴリにも属さない要素もあります。要素毎に、自分がどんなカテゴリや要素の子になれるか、自分がどんなカテゴリや要素の子を持てるかが決まっています。

メタデータコンテンツ (metadata content)

HTML のヘッダ部に記載する要素群です。下記の要素を含みます。

base / link / meta / noscript / script / style / template / title

フローコンテンツ (flow content)

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 / emembed / fieldset / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / ins / kbd / label / link (body要素の子孫要素の場合のみ) / main (階層的に正しいmain要素のみ)) / map / mark / MathML (itemprop 属性がある時) / meter / nav / noscript / object / ol / output / p / picture / pre / progress / q / ruby / s / samp / script / search / section / select / slot / small / span / strong / sub / sup / SVG / table / template / textarea / time / u / ul / var / video / wbr / 自律カスタム要素 / テキスト

セクショニングコンテンツ (sectioning content)

文書構造・セクションを定める要素群です。下記の要素を含みます。

article / aside / nav / section

ヘッディングコンテンツ (heading content)

ページやセクションなどの章題を示す要素群です。下記の要素を含みます。

h1 / h2 / h3 / h4 / h5 / h6 / hgroup

フレージングコンテンツ (phrasing content)

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 / label / link (body要素の子孫要素の場合のみ) / map / mark / MathML (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 content)

埋め込み系の要素群です。下記の要素を含みます。

audio / canvas / embed / iframe / img / MathML / object / picuure / SVG / video

インタラクティブコンテンツ (interactine content)

画面から操作可能など、インタラクティブな機能を持つ要素群です。下記の要素を含みます。

a (href属性があるときのみ) / audio (controls属性があるときのみ) / button / details / embed / iframe / img (usemap属性をもつときのみ) / input (type="hidden" 以外のときのみ) / label / select / textarea / video (controls属性をもつときのみ)

パルパブルコンテンツ (palpable content)

palpable は「明白な」を意味します。フローコンテンツやフレージングコンテンツを子要素に持つことができる要素です。必須ではありませんが、一般的に一つ以上の子要素を持ちます。下記の要素を含みます。

a / abbr / address / article / aside / audio (controls属性が存在する場合のみ) / b / bdi / bdo / blockquote / button / canvas / cite / code / data / del / 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 / label / main / map / mark / MathML / menu (子要素が1つ以上のli要素をもつ場合のみ) / meter / nav / object / ol (子要素が1つ以上のli要素を含む場合) / output / p / picture / pre / progress / q / ruby / s / samp / search / section / select / small / span / strong / sub / sup / SVG / table / textarea / time / u / ul (子要素が1つ以上のli要素を含む場合) / var / video / 自律カスタム要素 / 要素内の空白文字でないテキスト

スクリプトサポート要素 (script supporting elements)

スクリプトを記述する要素です。下記の要素を含みます。

script / template

トランスペアレント (transparent content models)

transparentは「透過的」を意味します。この要素が持つことができる子要素は、親要素の振る舞いに準じます。span が親要素である a 要素はフレージングコンテンツしか含むことができませんが、div が親要素である a 要素はフレージングコンテンツのみではなくフローコンテンツも含むことができます。下記の要素を含みます。

a / audio / canvas / del / ins / map / noscript (head 要素の子孫要素でない場合) / object / slot / video

セクショニングルート (sectioning root)

セクションの始まりとなる要素です。セクション毎に独自のアウトライン(h1～h6の章構成など)を持ちます。HTML5 で定義されていましたが、HTML Living Standard では廃止されました。下記の要素を含んでいました。

blockquote / body / details / dialog / fieldset / figure / td

フォーム関連カテゴリ

フォーム関連要素 (form associated elements)

formに関連する要素です。下記の要素を含みます。

button / fieldset / input / object / output / select / textarea / img

リステッド要素 (listed elements)

form や fieldset要素中に列挙される要素です。下記の要素を含みます。

button / fieldset / input / object / output / select / textarea

サブミッタブル要素 (submittable elements)

form がサブミットされる際に送信されるデータを保持する要素です。下記の要素を含みます。

button / input / select / textarea

リセッタブル要素 (resettable elements)

<input type="reset"> でリセットすることが可能な要素です。下記の要素を含みます。

input / output / select / textarea

リアソシエイタブル要素 (reassociateable elements)

form属性で form と関係づけることができる要素です。HTML5 で定義されていましたが、HTML Living Standard では、リアソシエイタブルの概念はありません。下記の要素を含んでいました。

button / fieldset / input / keygen / label / object / output / select / textarea

ラベラブル要素 (labelable elements)

label要素と関連付けることができる要素です。下記の要素を含みます。

button / input (type属性が hidden以外の場合) / 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(仮称) に近い仕様になっている気がしています。

もし、誰かが W4C という団体を設立し、FLEX-HTML1.0 (Flexible, Loose, Easy to learn and eXtensible HTML）という仕様を勧告したとします。FLEX-HTMLでは、過去の歴史的なタグをすべてサポートします。<UL>～</UL> を <FONT>～</FONT> で囲んではならないなどの、難しい規則をできるだけ排除します。SGMLアプリケーションであることも放棄します。タグの拡張性ももたせます。ユーザーエージェントは自分の解釈できるタグや属性のみを解釈します。最低限解釈できなくてはならないタグなどを３段階程度のレベルに分けます。(2000年3月5日:By 杜甫々)

誰かが W4C という団体を...: HTML5 は W3C ではなく、 WHATWG という別の団体が中心となって策定されました。
FLEX-HTMLでは、過去の歴史的なタグをすべてサポートします: さすがに font要素や center要素は破棄されましたが、ページ作成者は使用してはならないけど、ブラウザ開発者は実装を継続しなくてはならないとされました。
<ul>～</ul> を <font>～</font> で囲んではならないなどの、難しい規則をできるだけ排除します: font要素は破棄されましたが、bodyの直下にインライン要素も記述できる、a要素が ul要素などのブロック要素を含むことができるなど、いくつかの規則が緩和されました。
SGMLアプリケーションであることも放棄します。」: 放棄されました。
タグの拡張性ももたせます: HTML要素の中に MathML を含めることができるなど、HTML構文であっても拡張性が考慮されています。
ユーザーエージェントは自分の解釈できるタグや属性のみを解釈します: ユーザエージェントは font要素や big要素などの過去の要素も解釈することが求められるようになりました。
最低限解釈できなくてはならないタグなどを３段階程度のレベルに分けます: この部分はまだですね。h1 や p など、テキストブラウザを含めたすべてのブラウザがサポートすべき最低限の要素、canvas や ruby など今後のブラウザが標準でサポートすべき要素、font や b や acronym など、過去の互換性を考慮し、世の中のブラウザがサポートすべき要素... くらいの 3段階で定義されれば私好みなのですが...

その他、「最低限2つ以上の実装での相互互換性が確認できるまでは最終勧告にすべきではない(IETF系インターネット標準の常識ですね)」、「<!DOCTYPE> は記述する、しないを選択できるべき」、「XHTMLへの完全移行はあきらめた方がよい」など、当時私が感じていたことがいくつか実現されており、同じことを考えてくれる人達も居たのだと安心しています。

上記の考えを述べていた頃は、「HTML4.0 の思想をまるでわかっていない」といろいろ批判も受けたものでしたが、インターネット上の「デファクト標準」というものは非常に恐ろしいものです。一度広まったものは、そう簡単には変えることができません。今後出てくる新たな標準も、いかに、現状の「デファクト標準」と共存していくか、変更するのであれば、十分なメリットと十分な時間をかけて変更していくことが重要なのだと感じています。