|
|
|---|
この連載が本になりました！
「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要素は「フロー･コンテンツ」と「ヘッディングコンテンツ」に属しているので、このソースコードは誤っていることになります。
コンテンツモデルとカテゴリーのまとめ
- コンテンツモデルとは、要素の中に入れられる内容を定義したもの
- カテゴリーとは、各要素を分類したもの
次のページからは、コンテンツモデルとカテゴリーについて、より詳しく解説していきます。