HTML5

on Note

セクショニング・コンテンツ セクションの範囲を定義する

コンテンツモデルにおけるコンテンツカテゴリの中の1つ、セクショニング(Sectioning)コンテンツを解説します。

セクショニング・コンテンツに属する要素にはどんな役割があるのか、どんな要素が属するのかなど、セクショニング・コンテンツに関して詳しく知ることができます。

セクショニング・コンテンツの役割

セクショニング・コンテンツの役割は、セクションの範囲を定義することです。セクションには、「分割された部分」とか、文書での「節」や「項」といった意味があり、文書をセクションごとに分割するのがセクショニング・コンテンツです。

また、グローバルナビゲーションのような、他の部分とははっきり区別されるような部分もセクションとして考えます。

このように、セクションやリンクの集合といった、文書構造として意味のある分割がセクショニング・コンテンツの役割です。

セクショニング・コンテンツの sectionタグでセクションの範囲を定義する場合、次のようなマークアップになります。

<section>
    <p>1節</p>
</section>
<section>
    <p>2節</p>
</section>

セクションのひとまとまりを、セクショニング・コンテンツの要素の開始タグと終了タグで囲んで、まとまりの範囲を示します。

セクショニング・コンテンツを使って文章を適切に分割し、各セクションに見出しを配置することで、ユーザに対しても機械的にも流れを把握しやすくします。

アウトラインの生成

セクショニング・コンテンツでマークアップすれば、その部分でアウトラインが生成されます

仮にセクショニング・コンテンツで囲んでいなくても、見出しを配置していれば、見出しの階層構造から暗黙的なセクションとしてブラウザに認識されます。

しかしセクションは、セクショニング・コンテンツで囲んではっきり示すよう推奨されています。

また、セクショニング・コンテンツで囲んだ部分は、一般的に見出しを持ちます。

divタグとは使い分ける

以前は、まとまりとして囲む際 divタグを使っていました。

HTML5では、節や項、リンクのひとまとまりなど、まとまりに意味がある場合はセクショニング・コンテンツを使うべきとされています。divタグはセクショニング・コンテンツではありません。

ただ divタグで囲んでいた部分全てにセクショニング・コンテンツを使うのではなく、あくまでも、まとまりに節や項といった意味がある場合に限ります。

CSSでスタイルを適用する際にまとめるなど、文章構造として意味を持たない場合は divタグを使うべきです。

まとめ

セクショニング・コンテンツは、文書の節や項、リンクの集合といった、文書構造として意味のあるまとまりの範囲を示します。

セクショニング・コンテンツでマークアップすることでアウトラインを明確にすることができます。よってセクションは、セクショニング・コンテンツで囲むことが推奨されています。

文書の構造的に意味を持たない場合は、divタグを使いましょう。