このページの本文へ

3分でわかるHTML5のコンテンツモデルとカテゴリー (2/3)

2011年12月06日 13時00分更新

文●浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

コンテンツモデルのパターン

 前のページで示したサンプル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 などがあります。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く