section 要素

4.4.2 section 要素

Status: Last call for comments

カテゴリー
フロー・コンテンツ
セクショニング・コンテンツ
formatBlock 候補
この要素を使うことができるコンテキスト：
フロー・コンテンツが期待される場所
コンテンツ・モデル：
フロー・コンテンツ
コンテンツ属性：
グローバル属性
DOMインタフェース：
HTMLElement を使う。

section 要素は、一般的なドキュメント・セクションやアプリケーション・セクションを表します。セクションとは、この文脈においては、コンテンツの主題をグループ化するものです。通常はヘッダーを、場合によってはフッターを伴います。

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

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

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

次の例をご覧ください。りんごに関する記事（もっと大きなウェブサイトの一部）ですが、二つの短いセクションを含んでいます。

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

section 要素を利用することで、ウェブ制作者はどこにでも h1 要素を使うことができるようになる点に注目してください。該当ののセクションが、トップ・レベルなのか、第2レベルなのか、第3レベルなのかどうかについて心配する必要はありません。

これは卒業式の予定表ですが、2 つのセクションがあります。ひとつは、卒業生の一覧で、もうひとつは、式の説明です。

<!DOCTYPE Html>
<Html
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H1
       >Ceremony</H1
     ><P
       >Opening Procession</P
     ><P
       >Speech by Validactorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H1
       >Graduates</H1
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>

※ 原文：http://www.w3.org/TR/2010/WD-html5-20100624/sections.html#the-section-element