『コンテンツ・モデル』について / HTML5マークアップ時の基本

HTML5 『コンテンツ・モデル』について

HTML5でコーディングする場合に、知っておくべきことの一つに『コンテンツ・モデル』があります。その『コンテンツ・モデル』とは、各要素ごとに内包できるコンテンツを定義したものを言います。

つまり、要素ごとにどんなコンテンツを入れて良いのかが決まっているということみたいですね。

また、HTML5からは『ブロック/インライン要素』の概念がなくなり、『コンテンツ・モデル』を意識することになるので、間違ったコーディングをしないように、今回の記事でしっかり理解したいと思います。

カテゴリーによる定義

まず、コンテンツ・モデルとして大抵の場合はカテゴリーの定義が考えられるようです。前回記事≪HTML5のカテゴリーについて / HTML5マークアップ時の基本≫でカテゴリーの種類について勉強しましたが、下記にカテゴリーの関係を示した図がありますのでこちらも確認したいと思います。

カテゴリーの関係について確認できたら、実際にカテゴリーによって定義されているコンテンツ・モデルを考えていきます。

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

【正しいマークアップ例】

<section>
	<h1>HTML5でサイトをつくろう</h1>
    <p>タイトルの説明文・・・・・・</p>
</section>

【間違ったマークアップ例】

<section>
	<h1>HTML5でサイトをつくろう</h1>
    <meta name="description" content="「HTML5でサイトをつくろう」ではHTML5とCSS3をメインにサイト制作をする際の役に立つサイト情報やサンプルをまとめました。" />
</section>

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

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

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

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

【正しいマークアップ例】

<hgroup>
<h1>HTML5でサイトをつくろう</h1>
<h2>HTML5とCSS3とjQuery,Wordpressの情報とサンプルをまとめました </h2>
</hgroup>

【間違ったマークアップ例】

<hgroup>
<h1>HTML5でサイトをつくろう</h1>
<p>HTML5とCSS3とjQuery,Wordpressの情報とサンプルをまとめました </p>
</hgroup>

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

また、hgroup要素のコンテンツ・モデルは1個以上のh1～h6要素を入れなければならないという定義があるので、下記のように空で使用することはできません。
【間違ったマークアップ例】

<hgroup></hgroup>

子孫の要素を制限

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

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

少し頭が混乱してきたので、理解しやすいように順に整理して考えていきたいと思います。

address要素はヘッディング・コンテンツやheader要素に入れてはいけないということなので、
【間違ったマークアップ例】

<address>
	<header>
		<h1>HTML5でサイトをつくろう</h1>
    </header>
</address>

上記ソースで使用したh1.h2.header要素は、ヘッディング・コンテンツとheader要素になるので間違えということですね。

次にdiv要素はヘッディング・コンテンツ.セクショニング・コンテンツ.header要素.footer要素に属していないので、
【正しいマークアップ例】

<address>
	<div>
		HTML5でサイトをつくろう
    </div>
</address>

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

<address>
	<div>
		<h1>HTML5でサイトをつくろう</h1>
    </div>
</address>

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

トランスペアレント

トランスペアレントとは、その要素のコンテンツを、その要素に置き換えたとしても、HTML5で準拠していなければならないということを意味します。つまり、トランスペアレントと定義されている要素は『親要素のコンテンツ・モデルを継承する』ということになります。

トランスペアレントについては、私もなかなか理解できませんでした・・・そこで、トランスペアレントに定義されているa要素を例に、順に考えていきたいと思います。

【正しいマークアップ例】

<div>
ブログ
	<a href="#">
		<span>『HTML5でサイトをつくろう』</span>
	</a>
をはじめました。
</div>

まず、【正しいマークアップ例】を考えていきますが、トランスペアレントに定義されている要素は親要素を継承するということなので、トランスペアレントのa要素は親のdiv要素を継承します。

次にa要素の中にあるspan要素がa要素の中にあることが問題ないかを確認したいのですが、a要素はdiv要素を継承しています。つまりdiv要素の中にspan要素を入れて良いかを考えれば良いわけです。

div要素内にspan要素は内包できますので、上記ソースが正しかったことが分かります。

次に間違った例をみていきます。
【間違ったマークアップ例】

<span>
ブログ
	<a href="#">
		<section>『HTML5でサイトをつくろう』</section>
	</a>
をはじめました。
</span>

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

次にa要素の中にあるsectionがa要素の中にあることが問題ないかを確認していきます。a要素はspan要素を継承していますので、span要素の中にsection要素が使えるかを考えれば良いわけですが、span要素のコンテンツ・モデルではsection要素を入れることができないので上記ソースは間違っていることが分かります。

今回の『コンテンツ・モデル』については以上になりますが、新しいパターンを確認しましたら追記していきたいと思います。

参考サイト：

• HTML5コンテンツ・モデル　【W3G】
• コンテンツ・モデル　【W3G】

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

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

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

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

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

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