HTML5のセクショニング・コンテンツの中で、section要素の解釈と使い方が実務上でももっとも難儀な気がしたので、おさらいがてら調べたことを記しておく。
article要素との使い分けについてはほぼ触れていないので、各自ゴニョゴニョしていただけると。
覚書
- 内部に見出し(h1〜h6要素)を含むものに対し適用する
見出し(h1〜h6要素)を持たないケースへの使用はあまり好ましくない - 文書構造的に正しい配置であればスタイリングやJSのフックとして用いても良いことにする
ex.
<section id="hoge" class="piyo" style="margin-bottom: 10px;">...</section>
- ただし、レイアウト目的やフックのみで使用しない。その場合はdiv要素で行う
- body要素などのセクショニング・ルート(それ自体が独自のアウトラインを持つ要素)に用いる必要はないことを理解しておく
- アウトラインの確認には『HTML 5 Outliner(アウトライナー)』を推奨
用語解説
-
セクショニング・コンテンツ… HTML5におけるコンテンツモデルの1カテゴリー。以下の4つの要素が属する
- article
- aside
- nav
- section
-
セクショニング・ルート… 独立したアウトラインを持つことができる要素。文書全体のアウトラインに影響を与えない。以下の6つが属する
- blockquote
- body
- details
- fieldset
- figure
- td
- アウトライン… 全体の構造を示す概念。階層(入れ子)構造
- セクション… 文書の区分、区切り。明示的なセクションと暗黙的なセクションが存在する
補足
section要素を含めたセクショニング・コンテンツは明示的なアウトラインを生成するため、暗黙的なアウトラインを生成するヘッディング・コンテンツ(h1〜h6要素)よりも優先される。