<section>
| 対応ブラウザ | Chrome 5～ / Firefox 4.0～ / Internet Explorer 9～ / Opera 11.10～ / Safari 4.1～ / Android 2.2～ / iOS 4.0～ | ||
|---|---|---|---|
| タグの分類 |
フロー・コンテンツ セクショニング・コンテンツ パルパブル・コンテンツ |
含められるもの | フロー・コンテンツ |
| 使える場所 | フロー・コンテンツを使える場所 | ||
| 用例 |
<section> <h1>section要素の使い方</h1> <p>意味的に1つにまとまっている箇所でつかいます</p> </section> |
||
<section>とは
「section」とは、文書の指定した部分が１つのセクション、意味的な1つのまとまりであることを表すタグです。Webサイトのページは導入部分や新着情報、連絡先など、複数のセクションに分割してとらえることができます。
<article>、<aside>、<nav>とあわせて、<section>はセクション要素、セクショニングコンテンツと呼ばれ、それぞれがセクションを構成します。
他のセクション要素が記事や補足事項、ナビゲーションといった具体的な意味を持っているタグなのに対し、<section>はそれらに当てはまらない、より一般的なセクションを表す場合に使用します。
例えば、<section>要素は章立てされた文書の各章やタブ式ボックスの各タブなど、様々な箇所で使うことができます。
他のセクション要素で適切なものがある場合は、そちらを使いましょう。
<section>は文書を意味的に分割するためのタグで、デザインやレイアウトの為にあるタグではありません。<section>へCSSでスタイルを付けること自体は問題ありませんが、スタイルを付けるために意味的な区切りがない箇所へ<section>を付けるのは適切ではありません。レイアウト目的のコンテナが必要な場合は、<div>を使いましょう。
・セクションと見出し
セクションは<h1>～<h6>の見出し要素と深い関係があります。
あるセクションの同じ階層中で<h1>～<h6>の見出しを複数回使うと、最初の見出し以外については暗黙的なセクションが生成されます。
<section>
<h1>高いランクの見出し</h1>
<h2>低いランクの見出し</h2>
</section>
というように見出しのランクが下がる場合、<h1>を含むセクションの中へ、入れ子になった<h2>用のセクションが生成されます。つまり、
<section>
<h1>高いランクの見出し</h1>
<section>
<h2>低いランクの見出し</h2>
</section>
</section>
と同じような意味あいとなります。
また、
<section>
<h2>同じランクの見出し</h2>
<h2>同じランクの見出し</h2>
<h1>高いランクの見出し</h1>
</section>
のように、見出しが前のもの以上のランクで続く場合、後続の見出しの直前でセクションが閉じられ、新たなセクションが始まります。つまり、
<section>
<h2>同じランクの見出し</h2>
</section>
<section>
<h2>同じランクの見出し</h2>
</section>
<section>
<h1>高いランクの見出し</h1>
</section>
と同じような意味あいとなります。
（なお、実際にはセクションが作られるといっても<section>要素が挿入される訳ではないので、暗黙的なセクションをCSSでスタイリングすることはできません）
人手で明示的にセクション要素を使うのと同じ結果になる場合も多くありますが、そうではない時もありますし、見出しがセクションの先頭に来ない場合などは明示的に指定するしかありません。
基本的にはこの暗黙的セクションに頼らず、明示的にセクション要素で内容を分割していくことが推奨されています。
・アウトラインとセクション、見出し
仕様としては必須ではないのですが、セクション要素の内容には<h1>～<h6>などの見出しが含まれていることがよくあります。見出しを付けられないものをセクションにすべきではない、という意見さえあります。
セクションは文書のアウトラインを形成します。文書が意味的なまとまりで区切られていることによって、たとえばブラウザやその他のツールがページのセクションから自動的に箇条書きの要約/目次を抜き出して、アウトラインを表示することができます。
このとき、見出しを含む明示的なセクション要素、見出しにより作られた暗黙的なセクションについては、その見出しをアウトラインの表示に使うことができますが、内部に見出しを含まないセクション要素の場合、ユーザに何を表示するかがはっきりしなくなります。
ツールは「無題」と表示するかもしれませんし、内容の先頭何文字分かを表示しようとするかもしれません。
セクション要素には必ず見出しを付ける、見出しを付けられるもののみをセクション要素にする、というルールにすれば、ツールがどうアウトラインを表示するかははっきりします。
なお、<blockquote>、<body>、<details>、<dialog>、<fieldset>、<figure>、<td>はセクションルートとよばれ、それぞれのアウトラインを持つことができます。セクションルートの内側の（子孫の）セクションは、外側の（祖先の）アウトラインに影響を与えません。
