section タグの用途
<section> は 1 つのテーマの内容をまとめ、そのテーマを示す見出しで始まります。「Features」「Pricing」「FAQ」に分かれたランディングページは典型的な例です。
各セクションはページの章で、各見出しはページの目次の 1 行です。ほかのセマンティックなタグと同じく <section> には初期スタイルがなく、枠線は CSS で付けています。
section、article、div の違い
3 つは画面上では同じに見えます。違うのは、内容について何を伝えるかです。
| 要素 | 意味 | 判断の目安 |
|---|---|---|
<article> | 完結した、それだけで成り立つ内容 | 別のサイトやフィードで単独で公開しても意味が通じるか |
<section> | より大きな全体のテーマ別の部分 | 見出しがある (または必要) か、何かの 1 つの章か |
<div> | 意味なし: スタイルやレイアウトのための箱 | CSS や JavaScript のためだけにあるか |
ブログ記事、掲示板のコメント、ニュース記事、商品カードは article です。「Features」「第 2 章」「関連商品」は section です。3 枚のカードを横に並べる flex の行は div です。
section の中の article
2 つはどちらの向きにも入れ子にできます。ここでは「Latest posts」のセクションが、独立した記事をいくつか持っています。
<div class="grid"> に注目してください。カードを横に並べるためだけにあるので、div が正しいタグです。各投稿がそれだけで成り立つので、各カードは article です。
article の中の section
長い記事は、本の章のようにセクションに分けられます。見出しのレベルは記事自身の見出しから続けます。
青い箱が article (ガイド全体)、緑のバーがそのセクションです。セクションには 1 段下の見出しレベルを使います。h2 の記事は h3 のセクションを持ちます。
名前の付いた section はランドマークになる
スクリーンリーダーは特定の要素をランドマークとして一覧に出し、ユーザーはその間を移動できます。<section> が region ランドマークになるのは、アクセシブルな名前があるときだけです。aria-labelledby でその見出しを指しましょう。
<section aria-labelledby="pricing-title">
<h2 id="pricing-title">Pricing</h2>
...
</section>
これは、ユーザーが直接移動したくなるいくつかのセクションにだけ行い、すべてのセクションには行わないようにしましょう。ランドマークが 20 個あるページは、1 つもないページと同じくらい見渡しにくくなります。名前のないセクションも、見出しがスクリーンリーダーの見出し一覧に表示されるので役に立ちます。
セクションはページ内リンクの移動先にも向いています。id を付ければ、href="#id" のリンクでそこへ移動できます。
よくある間違い
- スタイルのための入れ物に
<section>を使う。 見出しもテーマもないなら<div>を使いましょう。各レイアウト用タグの使いどころは セマンティック HTML のページで紹介しています。 - 1 つのブログ記事を
<section>で囲む。 それだけで成り立つ記事は<article>です。 - 見出しのないセクション。 見た目だけ隠した見出しでもよいので見出しを付けるか、セクションかどうかを考え直しましょう。
<main>の代わりに<section>を使う。 ページのメインの内容は<main>に入れ、セクションはその中に置きます。- すべてのセクションに名前を付ける。 ランドマークの一覧が短く保たれるよう、
aria-labelledbyは重要なものにだけ付けましょう。
よくある質問
HTML の section タグとは何ですか？
<section> は、文書の章やランディングページの「料金」の部分のように、1 つのテーマに属する内容をまとめます。普通は、そのセクションが何についてのものかを示す見出しで始めます。
section と div の違いは何ですか？
<section> は、内容が独自の見出しを持つ、文書のテーマ別の部分であることを示します。<div> は何も示さず、スタイルやレイアウトのための箱です。CSS のための入れ物が欲しいだけなら <div> を使いましょう。
section と article の違いは何ですか？
<article> は、ブログ記事、コメント、商品カードのように、ページの外でもそれだけで意味が通じる内容です。<section> は、その文脈の中でだけ意味が通じる、より大きなものの一部です。その部分だけを単独で公開できるかを考え、できるなら article です。
article の中に section を、section の中に article を入れられますか？
どちらもできます。長い記事はセクションに分けられ、「最新の投稿」のようなセクションは記事の一覧を持てます。
section に見出しは必要ですか？
テーマに名前を付けるのは見出しなので、ほぼすべての場合に付けるべきです。見出しが思いつかないなら、その内容はおそらくセクションではなく、<div> のほうが合っています。
