HTML要素 ・ ページ構造
<section>
主題ごとのまとまり
ページ内の内容を、主題ごとの章に分ける要素です。通常は見出し（h2 など）を含めます。
01
サンプルコード
HTML
1<section>
2 <h2>メニュー</h2>
3 <p>コーヒーとケーキ。</p>
4</section>
5<section>
6 <h2>アクセス</h2>
7 <p>駅から徒歩5分。</p>
8</section>
CSS
1section {
2 padding: 12px 16px;
3 margin-bottom: 12px;
4 border: 1px solid #e0d6c8;
5}
6h2 {
7 font-size: 18px;
8 margin: 0 0 4px;
9}
02
実行結果
ブラウザでの表示
03
解説
section は、ひとつの主題でまとまった内容を表します。本の「章」のように、見出しを付けて区切れる単位に使います。
見出しのない単なる囲み（レイアウトや装飾のための箱）には、section ではなく div を使います。
単独で配信・再利用できる内容（ブログ記事など）なら、section ではなく article が適しています。
04
応用例・注意点
似た要素の使い分け
| 要素 | 説明 |
|---|---|
section | 見出しを持つ主題ごとのまとまり |
article | それだけで完結する独立したコンテンツ |
div | 意味を持たない汎用の囲み |
aside | 本筋から外れた補足 |
見出しと結びつける
aria-labelledby で見出しの id を指定すると、領域の名前として伝わります。
HTML
1<section aria-labelledby="menu-title">
2 <h2 id="menu-title">メニュー</h2>
3 …
4</section>
注意点
- 01スタイルを付けるためだけに section を使わないでください。
- 02section の中に見出しがないと、何のまとまりか伝わりません。