★HTML Living Standard リファレンス

<section> …… 一般的なセクションを表す
Internet Explorer

<section>タグは、一般的なセクションを表す際に使用します。

セクションとは、文書やアプリケーションのなかのテーマごとに区切られたコンテンツのひとまとまりです。例えば、イントロダクション、各ニュース項目、連絡先情報などを、それぞれセクションにすることで、文書をコンテンツのまとまりごとに分割できるかもしれません。

section要素が不適切なケース

section要素を単なるコンテナ要素として使用するのは不適切です。スタイリング目的やスクリプト作成の便宜のためにのみ要素が必要な場合、 section要素ではなくdiv要素を使用することが推奨されています。

section要素よりもarticle要素の方が適切な場合があります。セクションがブログエントリやニュース記事などの自己完結する内容である場合、 section要素の代わりにarticle要素を使用するほうが適切でしょう。

その部分に見出しを付けられるかどうか検討してみるのも良いでしょう。セクションに見出しは必須ではありませんが、通常h1-h6要素で指定する見出しを持つことができます。見出しを付けることができない部分を、section要素でマークアップするのは不適切と言えるでしょう。

■使用例

以下のサンプルは、卒業式の式次第と卒業生リストの2つのセクションからなります。

HTMLソース

<!DOCTYPE html>
<html lang=ja>
 <head>
  <title>卒業式 2022年夏</title>
 </head>
 <body>
  <h1>卒業</h1>
  <section>
   <h2>式次第</h2>
    <p>オープニング行列</p>
    <p>卒業生総代のスピーチ</p>
    <p>学級委員長のスピーチ</p>
    <p>卒業証書の授与</p>
    <p>校長による閉会の辞</p>
  </section>
  <section>
   <h2>卒業生</h2>
    <ul>
     <li>モリー・カーペンター</li>
     <li>アナスタシア・ルッチョ</li>
     <li>エベネザー・マッコイ</li>
     <li>カリン・マーフィー</li>
     <li>トーマス・レイス</li>
     <li>スーザン・ロドリゲス</li>
    </ul>
   </section>
 </body>
</html>

↓↓↓

ブラウザ上の表示

卒業

式次第

オープニング行列

卒業生総代のスピーチ

学級委員長のスピーチ

卒業証書の授与

校長による閉会の辞

卒業生

モリー・カーペンター
アナスタシア・ルッチョ
エベネザー・マッコイ
カリン・マーフィー
トーマス・レイス
スーザン・ロドリゲス

■使用例

以下のサンプルでは、article要素に指定されたりんごに関する記事のなかに、2つのsection要素が含まれています。

HTMLソース

<article>

 <hgroup>
  <h2>りんご</h2>
  <p>とってもおいしい果物！</p>
 </hgroup>
 <p>りんごはリンゴの木になる果実です。</p>

 <section>
  <h3>レッドデリシャス</h3>
  <p>『レッドデリシャス』は、多くのスーパーマーケットで見られる最も一般的な品種です。</p>
 </section>

 <section>
  <h3>グラニースミス</h3>
  <p>『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。</p>
 </section>

</article>

↓↓↓

ブラウザ上の表示

りんご

とってもおいしい果物！

りんごはリンゴの木になる果実です。

レッドデリシャス

『レッドデリシャス』は、多くのスーパーマーケットで見られる最も一般的な品種です。

グラニースミス

『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。

■使用例

以下のサンプルでは、section要素としてマークアップした章と付録のクラス名を付け分けて、CSSでそれぞれのヘッダーを異なるスタイルにしています。

HTMLソース

<style>
 section.chapter, section.appendix { border: double medium; margin: 2em; }
 section.chapter h2 { color:navy; font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h2 { color:green;  font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>

<header>
 <hgroup>
  <h1>著書の紹介</h1>
  <p>簡単に内容を紹介します。</p>
 </hgroup>
 <p><small>AZ出版社 発行</small></p>
</header>

<section class="chapter">
 <h2>第一章</h2>
 <p>第一章は、物語の始まりです。</p>
 <p>彼はある町に生まれ、成長していきます。</p>
</section>
<section class="chapter">
 <h2>第二章</h2>
 <p>第二章は、彼に試練が訪れます。</p>
 <p>試練を克服するため、彼は奮闘します。</p>
</section>
<section class="chapter">
 <h2>第三章</h2>
 <p>第三章は、クライマックスです。</p>
 <p>物語は予想をしない展開を迎えます。</p>
</section>
<section class="appendix">
 <h2>付録 A: 実例の紹介</h2>
 <p>こちらはデモンストレーションです.</p>
</section>
<section class="appendix">
 <h2>付録 B: あとがき</h2>
 <p>こちらは結びの言葉です。</p>
</section>

↓↓↓

ブラウザ上の表示

著書の紹介

簡単に内容を紹介します。

AZ出版社発行

第一章

第一章は、物語の始まりです。

彼はある町に生まれ、成長していきます。

第二章

第二章は、彼に試練が訪れます。

試練を克服するため、彼は奮闘します。

第三章

第三章は、クライマックスです。

物語は予想をしない展開を迎えます。

付録 A: 実例の紹介

こちらはデモンストレーションです.

付録 B: あとがき

こちらは結びの言葉です。

■関連項目

<body> …… 文書の本体（コンテンツ）を表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
<hgroup> …… 見出しとその関連コンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<footer> …… フッターを表す
<address> …… 連絡先情報を表す

★HTML Living Standard リファレンス

section要素が不適切なケース

■使用例

HTMLソース

ブラウザ上の表示

卒業

式次第

卒業生

■使用例

HTMLソース

ブラウザ上の表示

りんご

レッドデリシャス

グラニースミス

■使用例

HTMLソース

ブラウザ上の表示

第一章

第二章

第三章

付録 A: 実例の紹介

付録 B: あとがき

■関連項目

Sponsors