section 要素

4.3.3 section 要素

カテゴリー:
フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
region ロール (デフォルト - 指定不要), alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, presentation, search, status
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う

section 要素は、一般的なドキュメントやアプリケーションのセクションを表します。セクションとは、この文脈においては、コンテンツのテーマをグループ化するものです。通常は、section 要素の子となる見出し (h1-h6 要素) を入れることで、section 要素それぞれのテーマが識別されます。

セクションの例としては、章や、タブ付きダイアログボックス内のさまざまなタブページや、論文の番号付きセクションがあげられるでしょう。ウェブサイトのホームページは、イントロダクション、新着記事、連絡先情報といったセクションに分けられるでしょう。

ウェブ制作者は、その要素のコンテンツがシンジケーションにふさわしい場合には、section 要素ではなく article 要素を使うことが推奨されます。

section 要素は、汎用的なコンテナ要素ではありません。スタイリング目的やスクリプティングの都合だけで要素が必要になったとき、ウェブ制作者は、代わりに、div 要素を使うことが推奨されます。原則として、section 要素は、その要素のコンテンツが明示的にドキュメントのアウトラインにリストされる場合にのみに適しています。

次の例には、りんごに関する記事(もっと大きなウェブサイトの一部)がありますが、2 つの短いセクションを含んでいます。

<article>
 <header>
  <h2>リンゴ</h2>
  <p>風味たっぷりでワクワクするほど美味しいフルーツ!</p>
 </header>
 <p>リンゴは、リンゴの木になる仁果類です。</p>
 <section>
  <h3>レッド・デリシャス</h3>
  <p>この淡い赤色のリンゴは、多くのスーパーマーケットで見られ、
  最もありふれたものです。</p>
 </section>
 <section>
  <h3>グラニースミス</h3>
  <p>このジューシーで緑色のリンゴは、アップルパイによく
  使われます。</p>
 </section>
</article>

これは卒業式の予定表ですが、2 つのセクションがあります。ひとつは、卒業生の一覧で、もうひとつは、式の説明です。(この例のマークアップは、ときに要素間ホワイトスペースの量を最小化するために使われる一般的でないスタイルを採用しています。)

<!DOCTYPE Html>
<Html
 ><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>

この例では、本の著者が、章や付録のセクションをマークアップしました。CSS を使ってヘッダーをスタイリングしていますが、これらセクションを 2 種類のクラスを使って別々にスタイリングしています。他書を含んでいるもっと大きいドキュメントの一部として、この本全体を article 要素の中に入れています。

<article class="book">
 <style>
  section { border: double medium; margin: 2em; }
  section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
  section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
 </style>
 <header>
   <h2>私の本</h2>
   <p>サンプルなのでコンテンツはそんなにありません。</p>
  <p><small>Published by Dummy Publicorp Ltd.</small></p>
 </header>
  
 <section class="chapter">
  <h3>私の最初の章</h3>
  <p>これは私の最初の章です。あまり言うことがありません。</p>
  <p>でも、ここには段落が2つあります!</p>
 </section>
 <section class="chapter">
  <h3>まだ続くよ:第二章</h3>
  <p>かくかくしかじか、何とかかんとか。ドカーン。</p>
 </section>
 <section class="chapter">
  <h3>第三章: さらに例を</h3>
  <p>これは、明と暗の戦いが気付かれずに済む、というような
  ものではない。</p>
  <p>でも、私の話を台無しにしてしまうかもしれない。</p>
 </section>
 <section class="appendix">
  <h3>付録A: 例のまとめ</h3>
  <p>これは模擬です。</p>
 </section>
 <section class="appendix">
  <h3>付録B: 結びのことば</h3>
  <p>section が実際のセクションを指し示すために使われれば、セクションを
  スタイル <em>できる</em> ということを、この長い例で見せられていれば良いのだが。</p>
 </section>
</article>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-section-element