ここ最近HTML5をもう一度ちゃんと勉強し直そうと思いいろいろと調べていたのですが、 正しいマークアップをする際にはコンテンツモデルとカテゴリをしっかり理解する必要がありました。

今まで大まかにしか掴んでいなかったコンテンツモデルについて改めて整理してみました。

コンテンツモデルってなに?

HTML5の要素にはそれぞれ『カテゴリ』と『コンテンツモデル』があります。 カテゴリはその要素がどのような要素か分類をしたもの。 コンテンツモデルは中にどんな要素を入れることが出来るかを示したルールです。

コンテンツ・モデル - HTML5タグリファレンス

コンテンツモデルの例

ul要素のコンテンツモデルは『0個以上のli要素』です。 つまりul要素の下にはli要素以外は使用してはいけません。

以下は正しいマークアップの例

<ul>
    <li>東京</li>
    <li>神奈川</li>
    <li>千葉</li>
    <li>埼玉</li>
</ul>

ちゃんとulの直下にli要素が入っています。

でも以下のマークアップは間違いです。

<ul>
    <a href="tokyo.html"><li>東京</li></a>
    <a href="kanagawa.html"><li>神奈川</li></a>
    <a href="chiba.html"><li>千葉</li></a>
    <a href="saitama.html"><li>埼玉</li></a>
</ul>

正しく書き直すとこうなります。

<ul>
    <li><a href="tokyo.html">東京</a></li>
    <li><a href="kanagawa.html">神奈川</a></li>
    <li><a href="chiba.html">千葉</a></li>
    <li><a href="saitama.html">埼玉</a></li>
</ul>

li要素のコンテンツモデルはフローコンテンツです。 カテゴリがフロー・コンテンツのものを中に入れることができます。

a要素はフロー・コンテンツというカテゴリを持っているので使用することが可能です。

カテゴリーの種類

ここで出てきたフロー・コンテンツというのはカテゴリの一種です。 カテゴリにはいくつか分類があります。 ここで主なカテゴリーを紹介します。

1.メタデータ・コンテンツ

ドキュメントのメタデータやスタイルの定義などをするときに使用するコンテンツ。 ざっくり言うとブラウザで見たときに、ウインドウ内には表示されないもの。 ドキュメントの情報を記述するための要素です。

command, link, meta, noscript, script, style, title

2.フロー・コンテンツ

ドキュメント内に現れるコンテンツ全般はフローコンテンツです。

a abbr address area (map 要素の子孫の場合) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn dialog div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (scoped 属性が存在する場合) sub sup svg table textarea time u ul var video wbr テキスト

3.セクショニング・コンテンツ

見出しやフッターの範囲を指定するコンテンツのこと

article aside nav section

4.ヘッディング・コンテンツ

見出しを表すコンテンツのこと

h1 h2 h3 h4 h5 h6 hgroup

5.フレージング・コンテンツ

段落のなかのテキストを指し示す要素のこと HTML4でいうインライン要素に近い考え方。

a abbr area (map 要素の子孫の場合) audio b bdi bdo br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr テキスト

フレージング・コンテンツほとんどはフレージング・コンテンツしか入れることが出来ないようです。 その例外の代表がa要素です(あとで説明します)

6.エンベディッド・コンテンツ

外部のリソースをインポートするためのコンテンツ。 画像やビデオ、フレーム、プラグイン、canvasなんかもそれにあたります。

audio canvas embed iframe img math object svg video

7.インタラクティブ・コンテンツ

ユーザー・インタラクションに特化したコンテンツのことです。 って言われると分かりづらいですが、簡単いうとブラウザで見た時、操作出来るコンテンツ。 リンクだったりフォームだったり、クリックとかテキスト入力とか出来るコンテンツ。

a audio (controls 属性が存在する場合) button details embed iframe img (usemap 属性が存在する場合) input (type 属性が hidden 状態でない場合) keygen label menu (type 属性が toolbar 状態の場合) object (usemap 属性が存在する場合) select textarea video (controls 属性が存在する場合)

とこのようにカテゴリに分類されています。 コンテンツモデルに「フロー・コンテンツ」と書かれていたら その中にはフロー・コンテンツしか入れることが出来ないという意味です。 なので分類はどんなのがあるか覚えておきたいですね。

a要素のコンテンツモデル「トランスペアレント」

いろいろと調べてて一番衝撃受けたのがa要素。 HTML4だとa要素はインライン要素だから中にブロック要素入れちゃだめ!って教わってきたけど 例えば以下のようなマークアップ

<aside>
    <a href="index.html">
        <section>
            <h1>タイトル</h1>
         <p>テキストテキストテキスト</p>
        </section>
    </a>
</aside>

HTML5だとこんなマークアップもありなんです。

a要素のコンテンツモデルは「トランスペアレント(ただしインタラクディブコンテンツは除く)」 トランスペアレントとは親要素のコンテンツモデル引き継ぐというものです。 つまり上のマークアップの場合、aside要素のコンテンツモデルを引き継ぐため先ほどのマークアップはありなんです。

各要素のコンテンツモデルについては仕様を確認しましょう。

HTML 要素 - HTML5タグリファレンス

まとめ

HTML5は文書構造をより意識したマークアップになっていて仕様も結構変わってます。 今回ちゃんとコンテンツモデルについてちゃんと理解して仕様を読むのが楽しくなりました。 今まで何となくしか理解してなかったですが、美しいマークアップをするためにも今後は意識して仕様を読みたいと思います。