★HTML Living Standard リファレンス

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

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

セクションとは、文書やアプリケーションのなかのテーマごとに区切られたコンテンツのひとまとまりです。

ウェブページの場合、イントロダクション、各ニュース項目、連絡先情報などのセクションに分割できるかもしれません。

section要素の適切な使い方

原則として、section要素は、要素の内容が文書のアウトラインに明示的に記載されている場合にのみ適切です。

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

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

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

■使用例

以下のサンプルでは、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>

↓↓↓

ブラウザ上の表示

りんご

とってもおいしい果物！

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

レッドデリシャス

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

グラニースミス

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

■使用例

以下のサンプルは、卒業式の式次第と卒業生リストの2つのセクションからなります。（以下のHTMLソースは、要素間の空白量を最小限に抑えるための特徴的なコーディングで記述されていますが、特に意味はありません。）

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>

↓↓↓

ブラウザ上の表示

卒業

式次第

オープニング行列

卒業生総代のスピーチ

学級委員長のスピーチ

卒業証書の授与

校長による閉会の辞

卒業生

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

■使用例

以下のサンプルでは、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>なんたら出版社 発行</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>

↓↓↓

ブラウザ上の表示

著書の紹介

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

なんたら出版社発行

第一章

なんたらかんたら、なんたらかんたら…

第二章

なんたらかんたら、なんたらかんたら…

第三章

なんたらかんたら、なんたらかんたら…

付録 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