<section>: SECTION 要素
最終更新：2026-10-13
<section>SECTION 要素
独立したコンテンツのセクションを表し、通常は見出しを伴います。関連コンテンツのグループ化に適しています。
| カテゴリ | セマンティック |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </section> タグ |
| ステータス | 標準 |
📝 構文
<section>セクションの内容</section>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <section> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： 純粋に見た目だけのグループ化なら div を使い、本当にセクションの意味がある場合にのみ section を使いましょう。
❓ よくある質問
Qsection と div の違いは何ですか？
A
<section> は「テーマのある内容のグループ」で、ほとんどの場合見出し（h2-h6）を伴うべきです。<div> は意味を持たず、純粋にレイアウトやスタイルのための存在です。内容がテーマを持ち、見出しが必要なら section。単に包むためだけなら div を使いましょう。Qsection と article はどう使い分けますか？
A内容が独立して成立し、ページから離れても意味を保つなら（記事・コメント・商品カード）
<article>。単なる章立てのグループなら（「はじめに」「使い方」「よくある質問」など）<section> です。迷ったら section の方が無難です。Qsection の中に必ず見出しが必要ですか？
A強く推奨されます。仕様は section のテーマが「通常は見出しに現れるべき」と述べており、見出しのない section は文書アウトライン上、意味が曖昧になります。どうしても見出しが要らないなら、多くの場合
<div> に変えるべきサインです。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
