HTML5の「コンテンツ・モデル」についてまとめました【MdN連載第7回目】

HTML5でコーディングする場合に、知っておくべきことの一つに『コンテンツ・モデル』があります。『コンテンツ・モデル』とは、各要素ごとに内包できるコンテンツを定義したものを言います。つまり、要素ごとにどんなコンテンツを入れて良いのかが決まります。
HTML5からは『ブロック/インライン要素』の概念がなくなり、『コンテンツ・モデル』『カテゴリー』を意識することになりますので基本の考え方を学びましょう。

まず、コンテンツ・モデルとして大抵の場合はカテゴリーの定義が考えられるようです。前回の記事「HTML5のカテゴリーの種類についてまとめました」でカテゴリーの種類についてまとめましたが、下記にカテゴリーの関係を示した図がありますのでこちらも確認したいと思います。

コンテンツ・モデルとは

コンテンツ・モデルとはどの要素（タグ）にどんなコンテンツを入れて良いかを定義したものをいいます。すべての要素に定義されており、HTML5でマークアップする場合は、コンテンツ・モデルを意識する必要があります。

例えば、section要素のコンテンツ・モデルはフロー・コンテンツとセクショニング・コンテンツに定義されています、これらのカテゴリーに属する要素であればsection要素の中に入れても良いということになります。逆を言えば、それ以外のカテゴリーは入れられないということになります。

HTML4やxhtmlの際のブロックレベル要素とインライン要素でもインライン要素の中にブロックレベル要素を入れてはいけないということがありましたが、それと同じような考え方なのでイメージはしやすいと思います。HTML5ではブロックレベル要素とインライン要素という分け方がなくなり、カテゴリーとして7つの分類ができた形になります。

「正しいマークアップ例」ではsection要素内にあるh1とp要素がフロー・コンテンツに属する要素なので問題ありませんが、「間違ったマークアップ例」ではフロー・コンテンツにもセクショニング・コンテンツにも属していない、メタデータ・コンテンツのmeta要素を入れてしまっているので誤った使い方になっています。

また、いくつかの要素のコンテンツ・モデルでは、カテゴリーではなく、入れられる要素を特定しているものがあります。

カテゴリー自体はほとんどの要素がフロー・コンテンツですので、図を見るとすべて入れられるのであまり関係ないのではと思う方もいると思いますが、これからあげるいくつかの例外をまず覚えるとよいです。

特定の要素が持つ限定ルール

例えば、hgroup要素です。hgroup要素はh1～h6の見出し要素以外は中に入れて使用することができません。

「正しいマークアップ例」ではhgroup要素内にh1とh2の見出し要素が入っているので問題ありませんが、「間違ったマークアップ例」ではp要素が入ってしまっているので間違ったマークアップになっています。

また、hgroup要素のコンテンツ・モデルは1個以上のh1～h6要素を入れなければならないという定義があるので、空で使用することはできません。

h1要素とp要素でマークアップする場合はhgroup要素でなく、section要素やdiv要素などが使用できます。（※全体の原稿により使い方が変わる可能性があります）

子孫の要素を制限

通常のコンテンツ・モデルとは、その要素の子の直下に入る要素を制限するというこですが、一部の要素ではコンテンツ・モデルで子孫の要素を制限するものがあるようです。

例えば、address要素はフロー・コンテンツに属していますが、子孫にヘッディング・コンテンツとセクショニング・コンテンツ、そしてheader要素とfooter要素を入れてはいけないことになっているようです。

例えば、h1要素はフロー・コンテンツですが、ヘディング・コンテンツにも属しています。そのためadoress要素の子孫にヘディング・コンテンツになるh1要素をいれることができません。同様にsection要素もフロー・コンテンツですが、セクショニング・コンテンツにも属しているのでaddress要素に入れることができません。

カテゴリーの図を見るとすべての要素がフローコンテンツなのですべて囲めるのではないか？と思った人もいると思いますが、このような例外の部分を覚えると要素を使うルールがわかりやすくなります。

div要素はフロー・コンテンツですが、ヘッディング・コンテンツ、セクショニング・コンテンツ、header要素、footer要素に属していないので、address要素の中にdiv要素を入れることができます。

では、div要素はフロー・コンテンツに属しているので、中にヘッディング・コンテンツを入れることができますが、上記のソースの中に入れた場合はどうなるでしょうか。

address要素は『子孫』の要素を制限するので、上記は間違ったマークアップになってしまいます。HTMLの際もaddress要素はインライン要素でしたのでこのような形のマークアップはしていないと思いますが、このパターンはマークアップ時に見落としてしまいそうなので気をつけたいと思います。

トランスペアレント

トランスペアレントとは、その要素のコンテンツを、その要素のコンテンツ（開始タグと終了タグ）に置き換えたとしても、HTML5で準拠していなければならないということを意味します。つまり、トランスペアレントと定義されている要素はコンテンツ（開始タグと終了タグ）が削除（※実際の削除ではなく見えなくなった場合）に『親要素のコンテンツ・モデルを継承する』ということになります。

トランスペアレントについては、わかりにくい部分もありますのでトランスペアレントに定義されているa要素を例に、考えていきたいと思います。

トランスペアレントに定義されている要素は親要素を継承するということなので、トランスペアレントのa要素は親のdiv要素を継承します。

次にa要素の中にあるspan要素がa要素の中にあることが問題ないかを確認したいのですが、a要素はdiv要素を継承しています。a要素の開始タグと終了タグを削除するとdiv要素の直下にspan要素を入れて良いかを考えれば良いわけです。
div要素内にspan要素は内包できますので、上記ソースが正しかったことが分かります。

「正しいマークアップ例」と同様に、まずa要素の親要素を確認します。今回はa要素はspan要素を継承することになります。

次にa要素の中にあるsectionがa要素の中にあることが問題ないかを確認していきます。

span要素の直下にa要素を入れることは問題ありません。また、a要素の直下にsection要素を入れることも問題ありません。しかし、ここからa要素の開始タグと終了タグを削除するとspan要素の直下にsection要素が来ることになります。

span要素のコンテンツ・モデルではsection要素を入れることができないので上記ソースは間違っていることが分かります。

トランスペアレントについては少しわかりにくい部分もあるかと思いますが、その他の事例は比較的わかりやすいと思います。HTML5からのカテゴリーとコンテンツ・モデルを理解すると正しいマークアップがわかりやすくなりますので基本から覚えて行きましょう。

次回は「アウトライン」についてついてまとめます。

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。