私がHTMLについて勉強を始めた頃はXHTML1.0が主流として使われており、

XHTMLでは要素（タグ）がインライン要素とブロック要素の2種類だけに分かれていて、

「インライン要素の中にブロック要素を入れてはいけない」「インライン要素は意味を持つブロック要素で囲む必要がある」といったことを念頭に入れていればコーディングで大きな間違いはなかったのですが、

 

HTML5でコンテンツモデルという新たな要素の分類基準が設けられてからは、

a要素でブロック要素と呼ばれていたグループの要素を囲むことが可能になったりするなど、

要素の囲み方のルールが複雑になりました。

 

tableの直下にはtbody, thead, trのいずれかしか配置してはいけないなど、

基本的な各要素の囲み方のルールはXHTMLと替わらないのですが、

「a要素で囲むことができるのはどこまで？」「spanやstrongのルールは変わったの？」

といった、HTML5からの新たなルールがどのようなものかわからないと、

間違ったコーディングをしてしまうことは避けられないので、

今回具体的に調べてみることにしました。

 

参考サイト

浜 俊太朗のHTML5マークアップ移行ガイド

HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス

3.2.5 Content models — HTML5

 

参考図書

『HTML5マークアップ 現場で使える最短攻略ガイド』 浜俊太朗(著) 2013.12

 

HTML5のコンテンツモデルとは？

コンテンツモデルとは、簡単に言うと、

「どの分類の要素が、どの分類の要素を含むことができるのか」というルールのことです。

HTML5では要素が14種類に分類されています。

 

とはいえ、それぞれの要素が1つずつ分類を持っているのではなく、複数の分類を持ちます。

たとえば、h1要素は「フレージングコンテンツ」というコンテンツモデルに分類されており、

「フローコンテンツ」、「ヘッディングコンテンツ」というカテゴリーに属します。

 

h1要素の場合、フレージングコンテンツというコンテンツモデルであり、

フレージングコンテンツのカテゴリーに属する要素のみを含むことができます。

 

つまり、「どのコンテンツモデルが、どのカテゴリーの要素を含むことができるか」というルールが、

コンテンツモデルの基本になります。

 

しかしながら、HTML5のコンテンツモデルはこの限りではなく、全部で次の７つのパターンがあります。

1. カテゴリー単位で定義: h1, span etc.
2. カテゴリー単位で定義(条件つき): header, button etc.
3. 特定の内容のみ入れられる: table, ul etc.
4. 特定の内容のみ入れられる(条件つき): dl etc.
5. 他の要素を入れられない: img, br etc.
6. 親要素の条件を引き継ぐ: del, ins etc.
7. 親要素の条件を引き継ぐ(条件付き): a, iframe etc.

つまり、ある程度の基本的なルールはあるが、

各要素の特性によって含むことができる要素がそれぞれ限られているということのようです。

 

とはいっても、この特性は、

「tableの直下にはtrやtbodyのようなテーブル関係の要素しか入れられない」

「dlには最低1つのdtとそれに続く１つ以上のddを入れなければならない」

「フレージングコンテンツのコンテンツモデルであるbuttonのような操作できる要素(インタラクティブコンテンツ)には、

フレージングコンテンツのカテゴリであってもaやiframeのような同じく操作できる要素を含むことはできない」

といった、

それぞれの要素の意味や基本的な使い方が理解できていれば迷うことのないものばかりですので、

そこまで複雑に考える必要はないと言えます。

 

それでは、コンテンツモデルの基本になるカテゴリーとコンテンツモデルについて、具体的にご紹介いたします。

カテゴリーと要素

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

おもにhead要素に入る、メタデータやスタイル・スクリプトといった、基本的に描画されない要素です。

このカテゴリの要素: base, link, meta, noscript, script, style, title

 

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

文書に使われるほとんどの要素です。

このカテゴリーの要素: a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, 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, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト

 

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

セクションの範囲を定義する要素です。

このカテゴリの要素: article, aside, nav, section

 

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

セクションのヘッダー(見出し)を表す要素です

このカテゴリの要素: h1, h2, h3, h4, h5, h6 (hgroupは廃止)

 

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

文書のテキストを表す要素です。この要素の多くがフレージングコンテンツのコンテンツモデルとなります。

以前インライン要素と呼ばれていた要素の多くがこの要素にあたります。

このカテゴリの要素: a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト

 

エンベッディッドコンテンツ(Embedded content)

文書に他のリソース(画像や動画)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素です。

このカテゴリの要素: audio, canvas, embed, iframe, img, math, object, svg, video

 

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

ユーザーが操作できる要素です。

このカテゴリの要素: a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video

 

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

具体的な意味を持つ要素のことです。

br要素やhr要素のような、具体的な意味を持たない要素はこのコンテンツから省かれます。

フローティングコンテンツやフレージングコンテンツのコンテンツモデルをもつ要素は、

hidden属性の指定されていないパルパブルコンテンツを含まなければならないと定義されています。

このカテゴリの要素: a, abbr, address, article, aside, audio(controls属性を持つ場合), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(dtとddが一組以上ある場合), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input(type属性の値がhiddenでない場合), ins, kbd, keygen, label, map, mark, math, menu(type属性の値がtoolbarかlistの場合), meter, nav, object, ol(子要素に一つ以上のli要素を持つ場合), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul(子要素に一つ以上のli要素を持つ場合), var, video, テキスト(半角スペースのみは除く)

 

こちらのサイトで、それぞれの要素の具体的なルールが紹介されていますので、

是非、参考になされてください。