section要素の使い方 — 内容を話題ごとにまとめる

HTMLのsection要素は、ページの内容を話題ごとのまとまりに分ける要素です。ふつうは、そのまとまりの見出しと一緒に使います。

先に結論

まずは小さな例

<section aria-labelledby="plans-heading">
  <h2 id="plans-heading">料金プラン</h2>
  <p>使い方に合わせてプランを選べます。</p>
</section>

この例では、「料金プラン」が内容のまとまりを説明する見出しです。aria-labelledbyは、画面に見える見出しをこのまとまりの名前として使う指定です。

sectionは内容の意味をまとめる

sectionは、文章の中にある「料金」「使い方」「問い合わせ」のような話題のまとまりを表します。線や背景色を付けるためだけの箱ではありません。

たとえば、サービス説明に「できること」と「料金」の見出しがあり、それぞれ別の話題を説明しているなら、2つのsectionに分けられます。

section、article、divの違い

要素	使う場面
section	ページの中で、見出しを付けてまとめたい話題がある
article	ブログ記事や投稿のように、その部分だけでも内容が成り立つ
div	見た目やスクリプトの都合でまとめたい。特別な意味は付けない

迷ったら、そのまとまりに独自の見出しが必要か、その部分だけでも読めるかを考えてみましょう。記事や投稿のように独立した内容なら、article要素の説明も参考になります。

見出しの番号は自分で選ぶ

sectionを置いても、見出しは自動で作られません。見出しにはh1からh6を使い、ページ全体の見出しの順番に合わせてレベルを選びます。

h1〜h6見出し要素の使い方では、見出しレベルの選び方を短い例で説明しています。

たとえば、ページの大見出しがh1なら、その下の話題にはh2、さらにその中の小さな話題にはh3を使います。sectionを入れたからといって、見出しの番号が自動で変わるわけではありません。

読み上げソフトに「大きな場所」として伝える

sectionに名前があると、ブラウザーはそのまとまりをregionという目印として伝えることがあります。この目印を使うと、読み上げソフトなどでページの大きな場所へ移動しやすくなります。

見出しがあるだけでは、その見出しがsectionの名前になるとは限りません。例のようにaria-labelledbyで見出しと結び付けます。すべての小さなまとまりを目印にする必要はありません。ページの中で見つけやすくしたい大事なまとまりに使いましょう。

よくある間違い

• CSSで色や余白を付けたいだけなのに、すべてをsectionにする
• sectionを書けば見出しも自動でできると思う
• sectionの中の見出しレベルが自動で変わると思う
• 見出しのない小さなまとまりすべてに、読み上げ用の目印を付ける

見た目だけのまとまりにはdivを使い、話題を分けるときは見出しを付けてsectionを使います。

Atlasで詳しく確認する

要素の分類、見出しとの関係、アクセシビリティツリーでのrole、ブラウザーとWPTでの観測は、Yugien Atlasのsection要素で確認できます。