HTML5

トップ > HTMLリファレンス > HTML概要 > 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 へ移行)されなかったようです。

現時点(2015年1月3日)では、下記が最新版です。

HTML5 では、HTML4.0/4.01で作成した規約に関して、いくつか変更を加えています。

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) HTML のヘッダ部に記載する要素群です。 base / link / meta / noscript / script / style / template / title
セクショニングコンテンツ (sectioning) 文書構造・セクションを定める要素群です。 article / aside / nav / section
ヘッディングコンテンツ (heading) ページやセクションなどの章題を示す要素群です。 h1 / h2 / h3 / h4 / h5 / h6
フローコンテンツ (flow) HTML4.01 の主なブロック要素と、インライン要素を足したような要素群です。カテゴリに属さない要素とメタデータコンテンツの一部を除くく、すべての要素が含まれています。 --- フレージングコンテンツに含まれるもの ---
a / abbr / area (※1) / audio / b / bdi / bdo / br / button / canvas / cite / code / data / datalist / del / dfn / em / embed / i / iframe / img / input / ins / kbd / keygen / label / map / mark / math / meter / noscript / object / output / progress / q / ruby / s / samp / script / select / small / span / strong / sub / sup / svg / template / textarea / time / u / var / video / wbr / テキスト
--- フレージングコンテンツに含まれないもの ---
address / article / aside / blockquote / div / dl / fieldset / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hr / main / nav / ol / p / pre / section / table / ul
フレージングコンテンツ (phrasing) HTML4.01 のインライン要素に近い要素群です。フローコンテンツの中で、特に文章中に出現することのあるコンテンツです。 a / abbr / area (※1) / audio / b / bdi / bdo / br / button / canvas / cite / code / data / datalist / del / dfn / em / embed / i / iframe / img / input / ins / kbd / keygen / label / map / mark / math / meter / noscript / object / output / progress / q / ruby / s / samp / script / select / small / span / strong / sub / sup / svg / template / textarea / time / u / var / video / wbr / テキスト
エンベデッドコンテンツ (embedded) 埋め込み系の要素群です。 audio / canvas / embed / iframe / img / math / object / svg / video
インタラクティブコンテンツ (interactine) 画面から操作可能など、インタラクティブな機能を持つ要素群です。 a / audio (※2) / button / embed / iframe / img (※3) / input (※4) / keygen / label / object (※3) / select / textarea / video (※2)

※1 areaは、map要素の子孫の場合のみ
※2 audio, video は、controls属性があるときのみ
※3 img, object は、usemap 属性があるときのみ
※4 input は、type="hidden" 以外のときのみ

また、上記の主要 7カテゴリの他に、下記の分類も定義されています。

分類 説明 分類に含まれる要素
パルパブルコンテンツ (palpable) palpable は「明白な」を意味します。フローコンテンツやフレージングコンテンツを子要素に持つことができる要素です。必須ではありませんが、一般的に一つ以上の子要素を持ちます。 a / abbr / address / article / aside / audio (※5) / b / bdi / bdo / blockquote / button / canvas / cite / code / data / dfn / div / dl (※6) / em / embed / fieldset / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / i / iframe / img / input (※7) / ins / kbd / keygen / label / main / map / mark / math / meter / nav / object / ol (※8) / output / p / pre / progress / q / ruby / s / samp / section / select / small / span / strong / sub / sup / svg / table / textarea / time / u / ul (※8) / var / video / 要素内の空白文字でないテキスト
トランスペアレント (transparent) transparentは「透過的」を意味します。この要素が持つことができる子要素は、親要素の振る舞いに準じます。 a / audio / canvas / del / ins / map / object / video
セクショニングルート (sectioning root) セクションの始まりとなる要素です。セクション毎に独自のアウトライン(h1~h6の章構成など)を持ちます。 blockquote / body / fieldset / figure / td
スクリプトサポート要素 (script supporting) スクリプトを記述する要素です。 script / template
フォーム関連 (form-associated) formに関連する要素です。 button / fieldset / input / keygen / label / object / output / select / textarea, img
リアソシエイタブル (reassociateable) form属性で form と関係づけることができる要素です。 button / fieldset / input / keygen / label / object / select / textarea
リステッド (listed) formfieldset要素中に列挙される要素です。 button / fieldset / input / keygen / object / output / select / textarea
ラベラブル (labelable) label要素と関連付けることができる要素です。 button / input (※7) / keygen / meter / output / progress / select / textarea
サブミッタブル (submittable) form がサブミットされる際に送信されるデータを保持する要素です。 button / input / keygen / object / select / textarea
リセッタブル (resettable) <input type="reset"> でリセットすることが可能な要素です。 input / keygen / output / select / textarea

※5 controls属性が存在する場合のみ
※6 子要素として1つ以上の名前-値グループを含む場合
※7 type属性が hidden以外の場合
※8 子要素として1つ以上の li要素を含む場合

要素の包含関係

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 | 透過的
 ├□ canvas
 │└□ 透過的
 ├□ embed
 ├□ iframe
 │└□ テキスト
 ├□ object
 │└□ param | 透過的
 ├□ canvas
 │└□ 透過的
 ├□ script
 │└□ スクリプト
 ├□ noscript
 │└□ 透過的
 ├□ template
 │└□ テンプレート
 ├□ button
 │└□ フレージングコンテンツ
 ├□ input | keygen
 ├□ label
 │└□ フレージングコンテンツ
 ├□ select
 │├□ option
 │└□ optgroup
 │ ├□ option
 │ ├□ script
 │ │└□ スクリプト
 │ └□ template
 ├□ textarea
 │└□ テキスト
 ├□ datalist
 │├□ フレージングコンテンツ
 │└□ option
 │ └□ テキスト
 ├□ abbr | cite | code | data | dfn | em | kbd | mark | q | s | samp | strong | var | time
 │└□ フレージングコンテンツ
 ├□ br | wbr
 ├□ a
 │└□ 透過的
 ├□ map
 │├□ 透過的
 │└□ area
 ├□ area
 ├□ b | i | small | u
 │└□ フレージングコンテンツ
 ├□ bdi | bdo
 │└□ フレージングコンテンツ
 ├□ img
 ├□ ruby
 │├□ フレージングコンテンツ
 │├□ rtc
 ││├□ rt
 │││└□ フレージングコンテンツ
 ││└□ フレージングコンテンツ
 │└□ rb | rt | rp
 │ └□ フレージングコンテンツ
 ├□ meter | progress | output | span
 │└□ フレージングコンテンツ
 ├□ 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アプリケーションであることも放棄します。タグの拡張性ももたせます。ユーザーエージェントは自分の解釈できるタグや属性のみを解釈します。最低限解釈できなくてはならないタグなどを3段階程度のレベルに分けます。(2000年3月5日:By 杜甫々)

「誰かが W4C という団体を...」

HTML5 は W3C ではなく、 WHATWG という別の団体が中心となって策定されました。

「FLEX-HTMLでは、過去の歴史的なタグをすべてサポートします」

さすがに font要素は破棄されましたが、b要素や i要素は破棄予定(deprecated)が解除され、サポートが継続することになりました。

「<ul>~</ul> を <font>~</font> で囲んではならないなどの、難しい規則をできるだけ排除します」

font要素は破棄されましたが、bodyの直下にインライン要素も記述できる、a要素が ul要素などのブロック要素を含むことができるなど、いくつかの規則が緩和されました。

「SGMLアプリケーションであることも放棄します。」

放棄されました。

「タグの拡張性ももたせます」

HTML要素の中に MathML を含めることができるなど、HTML構文であっても拡張性が考慮されています。

「ユーザーエージェントは自分の解釈できるタグや属性のみを解釈します」

ユーザエージェントは font要素や big要素などの過去の要素も解釈することが求められるようになりました。

「最低限解釈できなくてはならないタグなどを3段階程度のレベルに分けます。」

この部分はまだですね。h1 や p など、テキストブラウザを含めたすべてのブラウザがサポートすべき最低限の要素、canvas や ruby など今後のブラウザが標準でサポートすべき要素、font や b や acronym など、過去の互換性を考慮し、世の中のブラウザがサポートすべき要素... くらいの 3段階で定義されれば私好みなのですが...

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

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

関連リンク


Copyright (C) 2011-2015 杜甫々
初版:2011年5月29日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/memo/html5.htm