セクショニングコンテンツとは
- HTML文書内の区間を明示する要素
-
section,nav,article,asideの4つ- headerやmainなどは暗黙的に区間が形成される
- どの要素も該当しない場合は
divを使用する
| 要素名 | 定義する内容 |
|---|---|
| section | 一般的な区間 |
| nav | 他要素へのナビゲーション |
| article | 自己完結している要素 |
| aside | 本文に関する間接要素 |
詳細
section
文書の一般的な区間を定義する要素。他に適切な要素がない場合に使用する。
使用する際は以下の点に注意する
- できる限り見出し要素を子要素に含め、区別できるようにする
- 本要素の内容が文書内で自己完結している場合、articleを使用する
- 本要素の内容がメインコンテンツに関する間接的な内容の場合、asideを使用する
- 本要素の内容が文書のメインコンテンツの場合、mainを使用する
- スタイル付けなどのラッパーとしてのみ使用する場合、divを使用する
MDN (section)
<section>
<h1>セクション</h1>
<span>Section要素には見出しを含める</span>
</section>
CSSやJavaScriptで扱うための単なる囲いとして使用している場合はdivを使用する
See the Pen section by Momokonomi (@Momokonomi) on CodePen.
アクセシビリティ
デフォルトのロールを持たず、ランドマークとして扱われない
section内部に見出しを持つ場合、aria-labelledby属性を付けることでランドマークとして扱うことができる
aria-labelledby - アクセシビリティ | MDN
nav
文書内の他の要素や他の文書へのナビゲーションリンクを表示するための要素
メニューや目次・索引などの作成に使用する
使用する際は以下の点に注意する
- 全てのリンクに本要素を使用する必要はない。ナビゲーションリンクの主要なブロックのみに使用する。
- 本要素を文書内に複数使用する場合、
aria-labelledby属性で区別できるようにする - スクリーンリーダーなどはこの要素を使用して初期読み上げから省略するか判断するために使用することがある
<nav>: ナビゲーションセクション要素 - HTML: ハイパーテキストマークアップ言語 | MDN
アクセシビリティ
デフォルトでnavigationロールをもち、ランドマークとして扱われる。スクリーンリーダーはランドマークを使用してページ内の要素に飛ぶことができるため、読み飛ばしが必要・便利ならばnav要素を使用する
navが複数存在する場合はaria-labelledbyで区別できるようにする
ARIA: navigation ロール - アクセシビリティ | MDN
article
サイト内の要素の中で自己完結している要素を表現するために使用する
Qiitaでは記事一覧の各記事が該当する
使用する際は以下の点に注意する
- articleは見出し要素などで識別できるようにする
- article要素を入れ子にした場合、内部のarticleは外部のarticleに関する記事を表現する
- artcile要素の著者情報をaddressで表現できるが、入れ子にしたarticleには適応されない
- article要素の発行日時はtime要素のdatetime属性で示すことができる
<article>: 記事コンテンツ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
See the Pen Article by Momokonomi (@Momokonomi) on CodePen.
アクセシビリティ
article要素はデフォルトでarticleロールをもつ。本ロールはランドマークとはみなされないが、多くの支援技術は気時間のナビゲートする手段をサポートする。
ARIA: article ロール - アクセシビリティ | MDN
aside
文書のメインコンテンツと間接的な関係しかない要素を表現するタグ
サイドバーや広告・補足事項を表現する際に使用する
使用する際は以下の点に注意する
- 文書中の括弧書きは文章の主要な流れにあるため、そのような要素に対して本タグを使用しない
<aside>: 余談要素 - HTML: ハイパーテキストマークアップ言語 | MDN
アクセシビリティ
デフォルトでcomplementaryロールをもつ。本ロールはランドマークとして扱われるため、支援技術が本タグ要素に飛んだり、スキップすることができる
複数のaside要素がある場合は、各要素にaria-label属性でラベルを付ける必要がある
ARIA: complementary ロール - アクセシビリティ | MDN
参考文献
- MDN
- （著：太田良典 中村直樹）HTML解体新書 仕様から紐解く本格入門 (2022年4月25日発行)