<section>: 汎用セクション要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<section> は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。
試してみましょう
<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>
This document provides a guide to help with the important task of choosing
the correct Apple.
</p>
</section>
<section>
<h2>Criteria</h2>
<p>
There are many different criteria to be considered when choosing an Apple —
size, color, firmness, sweetness, tartness...
</p>
</section>
h1,
h2 {
margin: 0;
}
属性
この要素にはグローバル属性のみがあります。
使用上の注意
前述のように、 <section> は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは <nav> 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 <section> の中に入れることができます。
また、次のようなことも考慮してください。
- この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ（例えば、ブログ投稿やブログのコメント、新聞記事など）を表す場合は、
<article>要素を使用したほうがいいでしょう。 - 内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合（関連リンクや著者の経歴など）は、
<aside>を使用してください。 - 内容が文書のメインコンテンツを表す場合は、
<main>を使用してください。 - スタイル付けのためのラッパーとしてのみ使用する場合は、
<div>を使用してください。大まかに言うと、<section>は文書のアウトラインの中に論理的に現れるべきです。
繰り返しになりますが、それぞれの <section> はできるだけ、特に見出し
(h1 - h6 要素) を <section> の子要素に含めて識別できるようにするべきです。見出しのない <section> の例については以下を参照してください。
例
単純な使い方の例
導入前
<div>
<h2>見出し</h2>
<p>素晴らしいコンテンツの数々</p>
</div>
結果
導入後
<section>
<h2>見出し</h2>
<p>素晴らしいコンテンツの数々</p>
</section>
結果
見出しのないセクションの使用
<section> が見出しなしで使用されている状況は、伝統的な文書構造よりも、ウェブアプリケーションや UI のセクションでよく見られます。文書内では、コンテンツの内容を示す見出しのない独立したセクションがあっても、実際には何の意味もありません。このような見出しは、すべての読者にとって便利ですが、特にスクリーンリーダーのような支援技術のユーザーにとっては便利であり、また、 SEO にも有効です。
しかし、二次的なナビゲーションの仕組みを考えてみましょう。グローバルナビゲーションがすでに <nav> 要素で囲まれている場合、 <section> の中に前へ/次へのメニューを入れることも考えられます。
<section>
<a href="#">前の記事</a>
<a href="#">次の記事</a>
</section>
また、アプリを制御するためのボタンバーのようなものはどうでしょうか。必ずしも見出しが必要ではないかもしれませんが、それでも文書の明確なセクションであることに変わりはありません。
<section>
<button class="reply">返信</button>
<button class="reply-all">全員に返信</button>
<button class="fwd">転送</button>
<button class="del">削除</button>
</section>
支援技術やスクリーンリーダーに適した CSS を使って非表示にするには、次のようにします。
.hidden {
position: absolute;
top: -9999px;
left: -9999px;
}
結果
コンテンツによっては、見出しを入れることで SEO 施策にもなるので、選択肢の一つとして検討してみてはいかがでしょうか。
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 |
フローコンテンツを受け入れるすべての要素。ただし、<section> 要素は
<address>
要素の子孫要素として配置してはならない。
|
| 暗黙の ARIA ロール |
region
（要素にアクセシブル名がある場合）、それ以外の場合は対応するロールなし
|
| 許可されている ARIA ロール |
alert, alertdialog,
application, banner,
complementary,
contentinfo, dialog,
document, feed,
log, main,
marquee, navigation,
none, note,
presentation, search,
status, tabpanel
|
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-section-element |
ブラウザーの互換性
Loading…