コンテンツモデルのパターン
前のページで示したサンプル3~4では、コンテンツモデルをカテゴリーによってシンプルに説明できましたが、すべての要素のコンテンツモデルがカテゴリーによって定義されているわけではありません。コンテンツモデルの定義には、ほかにもいくつかのパターンがあります。
カテゴリー単位で定義
前ページで紹介したパターンです。要素の役割に応じて分類した「カテゴリー」で、コンテンツモデルを定義しています。
このパターンの要素には、div, span, p, pre, blockquote, td, dd などがあります。
カテゴリー単位で定義されるが、条件が付く
基本的にはカテゴリーで定義されていますが、一部の要素のみ禁止されているなどの条件が付くパターンです。
たとえば、header要素やfooter要素は、基本的にはフローコンテンツを入れられますが、header要素とfooter要素は入れられません。また、button要素は、基本的にはフレージングコンテンツを入れられますが、その要素がインタラクティブコンテンツも兼ねている場合(たとえばa要素やiframe要素など)は、入れられません。
このパターンの要素には、header, footer, form, button, dfn, address, dt などがあります。
特定の内容のみ入れられる
table要素は、caption要素やthead要素などのテーブル関連要素のみ入れられますし、ul要素やol要素は、li要素のみ入れられます。また、iframe要素やtextarea要素のように、テキストのみ入れられる要素もあります。
このパターンの要素には、html, table, tr, ul, ol, select, iframe, textarea などがあります。
ポイント
table要素の場合は、入れられる要素だけでなく、順番も決められています。
特定の内容のみ入れられるが、条件が付く
hgroup要素は、h1要素~h6要素のみ入れられますが、最低でも1つは要素が必要です。dl要素は、0個以上のdtとddのグループが入れられますが、1つ以上のdt要素に続いて1つ以上のdd要素が登場する必要があります。
このパターンの要素には、hgroup, dl などがあります。
他の要素を入れられない
br要素やimg要素などの空要素は、中に内容を入れられません。シンプルなルールなので分かりやすいでしょう。
このパターンの要素には、br, hr, img, link, meta, input などがあります。
親要素の条件を引き継ぐ
仕様書では、「Transparent content models(トランスペアレント コンテンツモデル)」と記述されています。トランスペアレントは「透明」という意味です。トランスペアレント コンテンツモデルの要素は、親要素のコンテンツモデルを継承します。つまり、親要素によって入れられる内容が変わってくるのです。
例として、次のソースコードを見てみましょう。
<strong>
<del>
<section>
<h3>デジカメでオールド・レンズ</h3>
<p>現代のデジカメで数十年前の...</p>
</section>
</del>
</strong>
strong要素の中にdel要素を入れるのは問題ありません。また、del要素の中にsection要素を入れるのも問題ありません。それぞれ単体で見ると問題ありませんが、del要素はトランスペアレント コンテンツモデルなので、親要素によって中に入れられる内容が変わります。
このソースコードの場合、del要素の親はstrong要素なので、「strong要素の中にsection要素を入れられるか」と考えます。strong要素のコンテンツモデルはフレージングコンテンツですが、section要素のカテゴリーはセクショニングコンテンツとフローコンテンツなので、答えは「できない」です。よって、このソースコードは誤りということになります。
このパターンの要素には、del, ins などがあります。
親要素の条件を引き継ぐが、条件が付く
a要素もトランスペアレント コンテンツモデルですが、インタラクティブコンテンツは入れられません。インタラクティブコンテンツには、a要素やiframe要素、textarea要素などがあります。
このパターンの要素には、a などがあります。