<section>文書内のセクションを示す

<section>タグは、HTML文書の中(webページ内)の一つの章・節・項などのセクションを示す要素です。 一般的にセクションは見出しがあるひとまとまりの文章の事を指します。 なので基本的にセクションの内部にはh1~h6要素などの見出しを含みます。

またその部分だけで内容が完結しているセクション、例えばブログなどの個々の記事や独立した一つの文章として扱える部分には<section>ではなく、<article>を使う事が推奨されています。 そしてメインコンテンツには含まれないセクション、例えば補足情報などの部分には<aside>を使用し、主要なナビゲーションであるセクションには<nav>を使用します。

section要素はHTML5におけるセクションの懸念と混同されがちですが、セクションの懸念はbody要素内において、機能別に整理されたブロックのようなものです。 例えばセクションはsection要素に限らずbody・nav・article・aside・h1~h6・header・footer・addressなどによって作られ、HTML文書の構造をより明確化させています。

section要素はこれらの各セクションを示す要素の中で、抽象的な要素に対して使用します。 ですがsection要素は、一般的なコンテナ要素ではありません。 レイアウトのために要素をグループ化させたい場合は、div要素を利用する事が推奨されています。

またsection要素に対してclass属性やid属性を指定し、スタイルを適用する事も可能ですが、正しい使い方ではありません。 動詞でいうとsectionは「切る」、divisionは「分ける」という意味になるように、HTML文書を各機能ごとに切ったものに対してsection要素を利用します。 視覚的な都合などで分けたい場合にはdiv要素を利用するようにしましょう。

HTML5での変更点

section要素はHTML5から追加されました。

書式

  • <section 属性="値">~</section> ……… 一つのセクションを示す

使用した時の例

下記はsection要素の使用例となります。
2つ目の使用例は全てh1で記述していますが、セクションの中と外はアウトラインが独立しているため、下記のようにセクション内のh2をh1と記述しても問題ありません。

<section>
 <h1>大見出し</h1>
 <p>テキスト</p>
   <section>
   <h2>見出し</h2>
   <p>テキスト</p>
   </section>
   <section>
   <h2>見出し</h2>
   <p>テキスト</p>
   </section>
</section>
<section>
 <h1>大見出し</h1>
 <p>テキスト</p>
   <section>
   <h1>見出し</h1>
   <p>テキスト</p>
   </section>
   <section>
   <h1>見出し</h1>
   <p>テキスト</p>
   </section>
</section>

対応ブラウザなどのデータ

形式 <section>~</section> カテゴリ フローコンテンツ, セクショニングコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~