このページの本文へ

DESIGN 浜 俊太朗のHTML5マークアップ移行ガイド ― 第5回

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

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

浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷
連載インデックスへ

この連載が本になりました!

「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!

HTML5マークアップ 現場で使える最短攻略ガイド

定価:2,808円 (本体2,600円)/形態:B5変 (240ページ)
ISBN:978-4-04-866070-9

 前回のセクションに関する要素の解説では、「カテゴリー」や「コンテンツモデル」という単語が登場しました。カテゴリーとコンテンツモデルを理解すると、「要素の中にどの要素を入れられるのか」を、容易に判断できます。

「コンテンツモデル」は入れられるコンテンツのルール、
「カテゴリー」は詳細な分類

 第1回の記事で、「a要素がブロック的な要素を含められるようになった」という一文があったことを覚えているでしょうか? よく読むと、この文には妙な部分があります。「ブロック要素」ではなく、「ブロック的な要素」と書いてあるのです。あえてこのような書き方をしたのには、理由があります。

要素が中に入れられる内容を定義する「コンテンツモデル」

 これまでのHTMLでは、各要素はブロック要素とインライン要素に分けられており、「インライン要素の中にブロック要素を含められない」といったルールがありました。HTML5では、「各要素が中に入れられる内容」のルールを、各要素の「コンテンツモデル」によって定義しています。

 ……と言われても、ピンとこないかもしれません。では、以下のようなソースコードで見てみましょう。

サンプル1:ul要素の場合


<ul>
 <li></li>
 <li></li>
</ul>

 ul要素にはli要素しか含められないので、ul要素のコンテンツモデルは、「0個以上のli要素を持てる」です。

サンプル2:br要素の場合


<br />

 br要素のコンテンツモデルは、「空(空要素なので、中に何も入れられない)」です。

 どうでしょうか。「コンテンツモデル」について、なんとなく理解できたのではないでしょうか。

要素を分類する「カテゴリー」

 前の例では、「ul要素はli要素しか含められない」「br要素は何も含められない」というルールだったので、コンテンツモデルはとてもシンプルに説明できました。では、div要素の場合はどうでしょうか。p要素やh1~h6要素、セクション関連要素など、含められる要素がたくさんあります。1つずつ書き出していてはキリがありませんし、仕様書を確認する側も大変です。

 HTML5では、コンテンツモデルを、各要素に割り振られた「カテゴリー」で定義することで、この問題をシンプルに解決しています。

 「カテゴリー」とは、これまでのHTMLでいうところのブロック要素とインライン要素のような分類を、より詳細に定義したものです。HTML5の要素は、要素の役割に応じて「カテゴリー」が定義されています。

ポイント

ほとんどの要素が1つ以上の「カテゴリー」に属しますが、中にはどれにも属さない要素もあります。

 たとえば、div要素のコンテンツモデルは、「フローコンテンツ」カテゴリーです。フローコンテンツカテゴリーに属している要素には、h1, section, div, span, ……などがあります。つまり、div要素の中には、h1, section, div, span……などが入れられる、ということになります。

 もう少し具体的なケースを見てみましょう。以下は、div, h1, span要素の3つを使ったサンプルコードです。

サンプル3:正しい書き方


<div>
 <h1><span>Title Title Title</span></h1>
</div>

 HTML5の仕様書では、各要素のカテゴリーとコンテンツモデルは以下のように定義されています。

要素1:div要素

div要素のカテゴリー
フローコンテンツ
div要素のコンテンツモデル
フローコンテンツ

要素2:h1要素

h1要素のカテゴリー
フローコンテンツ/ヘッディングコンテンツ
h1要素のコンテンツモデル
フレージングコンテンツ

要素3:span要素

span要素のカテゴリー
フレージングコンテンツ
span要素のコンテンツモデル
フレージングコンテンツ

 各要素のコンテンツモデルとカテゴリーを踏まえてサンプル3のソースコードを読むと、

  • div要素のコンテンツモデルは、「フローコンテンツ」である
  • div要素の中にあるh1要素は、「フローコンテンツ」カテゴリーに属している
  • h1要素のコンテンツモデルは、「フレージングコンテンツ」である
  • h1要素の中にあるspan要素は、「フレージングコンテンツ」カテゴリーに属している

 となるので、このソースコードは正しいことになります。

 では、次の例はどうでしょうか。

サンプル4:誤った書き方


<div>
 <span><h1>Title Title Title</h1></span>
</div>

 サンプル4の要素のコンテンツモデルとカテゴリーを整理すると、

  • div要素のコンテンツモデルは、「フローコンテンツ」である
  • div要素の中にあるspan要素は、「フローコンテンツ」と「フレージングコンテンツ」カテゴリーに属している
  • span要素のコンテンツモデルは、「フレージングコンテンツ」である
  • span要素の中にあるh1要素は、「フローコンテンツ」と「ヘッディングコンテンツ」に属している

となります。span要素は「フレージングコンテンツ」だけしか中に入れられませんが、h1要素は「フロー・コンテンツ」と「ヘッディングコンテンツ」に属しているので、このソースコードは誤っていることになります。

コンテンツモデルとカテゴリーのまとめ

  • コンテンツモデルとは、要素の中に入れられる内容を定義したもの
  • カテゴリーとは、各要素を分類したもの

 次のページからは、コンテンツモデルとカテゴリーについて、より詳しく解説していきます。

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング