第7回目 HTML5の「コンテンツ・モデル」についてまとめよう
| HTML5でコーディングする場合、知っておくべきことのひとつに「コンテンツ・モデル」があります。「コンテンツ・モデル」とは、各要素ごとに内包できるコンテンツを定義したものを言います。つまり、要素ごとにどんなコンテンツを入れて良いのかを決めるものです。HTML5からは「ブロック/インライン要素」の概念がなくなり、「コンテンツ・モデル」と「カテゴリー」を意識することになりますので、基本の考え方を学びましょう。 解説：（有）ムーニーワークス 林 豊／田崎一成 |
| まず、コンテンツ・モデルとして大抵の場合はカテゴリーの定義が考えられるようです。前回の「HTML5の「カテゴリー」についてまとめよう」でカテゴリーの種類についてまとめましたが、下記にカテゴリーの関係を示した図がありますのでこちらも確認したいと思います。 |
 |
カテゴリーの関係
●コンテンツ・モデルとは
| コンテンツ・モデルとはどの要素（タグ）にどんなコンテンツを入れて良いかを定義したものをいいます。すべての要素に定義されており、HTML5でマークアップする場合は、コンテンツ・モデルを意識する必要があります。 例えば、section要素のコンテンツ・モデルはフロー・コンテンツとセクショニング・コンテンツに定義されます。これらのカテゴリーに属する要素であればsection要素の中に入れても良いということになり、逆を言えば、それ以外のカテゴリーは入れられないということになります。 また、HTML4やxhtmlの際のブロックレベル要素とインライン要素でもインライン要素の中にブロックレベル要素を入れてはいけないということがありましたが、それと同じような考え方なのでイメージはしやすいと思います。HTML5ではブロックレベル要素とインライン要素という分け方がなくなり、カテゴリーとして7つの分類ができた形になります。 |
 |
| 「正しいマークアップ例」ではsection要素内にあるh1とp要素がフロー・コンテンツに属する要素なので問題ありませんが、「間違ったマークアップ例」ではフロー・コンテンツにもセクショニング・コンテンツにも属していない、メタデータ・コンテンツのmeta要素を入れてしまっているので誤った使い方になっています。 また、いくつかの要素のコンテンツ・モデルでは、カテゴリーではなく、入れられる要素を特定しているものがあります。 カテゴリー自体はほとんどの要素がフロー・コンテンツですので、図を見るとすべて入れられるのであまり関係ないのではと思う方もいると思いますが、これからあげるいくつかの例外をまず覚えるとよいです。 |
●特定の要素が持つ限定ルール
| 特定の要素が持つ限定ルールについて言及するならば、hgroup要素があげられます。例えば、hgroup要素はh1～h6の見出し要素以外は中に入れて使用することができません。 |
 |
hgroup要素はh要素以外は入れてはいけない。また、空もいけない
|
「正しいマークアップ例」ではhgroup要素内にh1とh2の見出し要素が入っているので問題ありませんが、「間違ったマークアップ例」ではp要素が入ってしまっているので間違ったマークアップになっています。 また、hgroup要素のコンテンツ・モデルは1個以上のh1～h6要素を入れなければならないという定義があるので、空で使用することはできません。 h1要素とp要素でマークアップする場合はhgroup要素でなく、section要素やdiv要素などが使用できます。 （※全体の原稿により使い方が変わる可能性があります） |
 |
●子孫の要素を制限
|
通常のコンテンツ・モデルとは、その要素の子の直下に入る要素を制限するというこですが、一部の要素ではコンテンツ・モデルで子孫の要素を制限するものがあるようです。 例えば、address要素はフロー・コンテンツに属していますが、子孫にヘッディング・コンテンツとセクショニング・コンテンツ、そしてheader要素とfooter要素を入れてはいけないことになっているようです。 またh1要素はフロー・コンテンツですが、ヘディング・コンテンツにも属しています。そのためadoress要素の子孫にヘディング・コンテンツになるh1要素をいれることができません。同様にsection要素もフロー・コンテンツですが、セクショニング・コンテンツにも属しているのでaddress要素に入れることができません。 カテゴリーの図を見るとすべての要素がフローコンテンツなのですべて囲めるのではないか？と思った人もいると思いますが、このような例外の部分を覚えると要素を使うルールがわかりやすくなります。 |
 |
header要素、h1要素はヘディング・コンテンツ、section要素はセクショニング・コンテンツの為address要素に入れることができない
| div要素はフロー・コンテンツですが、ヘッディング・コンテンツ、セクショニング・コンテンツ、header要素、footer要素に属していないので、address要素の中にdiv要素を入れることができます。 |
 |
div要素のみの場合は入れることができる
| このようにサンプルソースを見ると、section要素ごとに見出しと内容があるのを確認できます。では、div要素はフロー・コンテンツに属しているので、中にヘッディング・コンテンツを入れることができますが、上記のソースの中に入れた場合はどうなるでしょうか。 |
 |
h1要素がヘッディング・コンテンツなのでこの場合は間違いになります
| 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からのカテゴリーとコンテンツ・モデルを理解すると正しいマークアップがわかりやすくなりますので基本から覚えて行きましょう。
次回は「アウトライン」についてついてまとめます。
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
