HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<section>
セクション要素。文書やアプリケーションの、意味合いのある独立したセクション（区画）を定義します。
info
概要
<section> 要素は、文書やアプリケーションの独立したセクションを表現するためのセマンティックな要素です。例えば、章、グループ化されたコンテンツ、タブ付きインターフェースのタブコンテンツなど、一つのテーマに関連するコンテンツの塊を示すために使われます。
原則として、見出し (<h1>〜<h6>) を子要素として含むべきです。 見出しがない場合は <div> の使用を検討してください。
play_circle
デモ (静的表示)
HTML (Source)
<section>
<h2>製品の特長</h2>
<p>最新モデルの革新的な機能をご紹介します。</p>
</section>
<section>
<h2>お客様の声</h2>
<p>実際に製品をご利用いただいたお客様の感想です。</p>
</section>
Preview (Result)
製品の特長
最新モデルの革新的な機能をご紹介します。
お客様の声
実際に製品をご利用いただいたお客様の感想です。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| Global Attributes | 全ての HTML 要素で使用できるグローバル属性（id、class、styleなど）のみを持ちます。独自の属性はありません。 |
| aria-labelledby | セクションの見出しが複数の要素で構成されている場合など、アクセシビリティ上のセクション名を明示的に指定するために使用されます。 |
code
実用例
1. 基本的なセクション構造
<section>
<h2>私たちのミッション</h2>
<p>世界中の人々に高品質なサービスを提供します。</p>
</section>
2. 記事内のサブセクション
<article>
<h1>HTML5 セマンティック要素の解説</h1>
<section>
<h2>section要素とは</h2>
<p>...</p>
</section>
<section>
<h2>article要素との違い</h2>
<p>...</p>
</section>
</article>
3. 見出しを持たない場合の適切な要素
<!-- <section>は不適切。スタイル目的のグループ化は<div>が適しています。 -->
<div class="grid-wrapper">
<div class="item">商品A</div>
<div class="item">商品B</div>
</div>
lightbulb
知っておくべき重要事項
structure
<section>と<div>の使い分け
<section> は、**テーマ別のグループ**や、**見出しが付けられるべき内容の塊**のために使われます。単なるスタイル上のグループ化、レイアウト調整のためには、意味を持たない <div> 要素を使用すべきです。
accessibility_new
適切な見出しの設定
スクリーンリーダーなどの支援技術は、
スクリーンリーダーなどの支援技術は、
<section> 内の見出し（<h1>〜<h6>）を使って文書のアウトラインを把握します。アクセシビリティを確保するため、**すべての <section> に関連する見出しを含める**ようにしてください。