section要素
section要素はHTML5から新たに追加された要素です。
section要素は潜在的に見出しを持つ文書内のセクションを表します。すべてのsection要素は、子要素に少なくとも1つ以上のヘディングコンテンツを含めることで、そのアウトラインの見出しを明示的に識別できるようにするべきです。
使用例のように文脈の途中に登場させることで、その文書のセクションを独立させることができます。また、そのセクションがブログサイトの1つの記事など、そのコンテンツ自体で完結するセクションである場合はarticle要素を用いることを検討するべきです。
本稿執筆時点において、主要なユーザーエージェントでアウトラインアルゴリズムを実装したものは存在しないため、ユーザーにドキュメントの構造を伝える場合は、見出しのレベルを用いて文書構造を示すことを推奨します。
使用例
section要素などのセクショニングコンテンツを用いることで、以下の例に登場するp.target要素がどのセクションに含まれるのかが変化します。
<body>
<h1>見出し１</h1>
<p>見出し１について</p>
<h2>見出し２</h2>
<p>見出し２について</p>
<h3>見出し３</h3>
<p>見出し３について</p>
<p class="target">見出し３について</p>
<p class="target">見出し３について</p>
</body>
<body>
<h1>見出し１</h1>
<p>見出し１について</p>
<section>
<h2>見出し２</h2>
<p>見出し２について</p>
<section>
<h3>見出し３</h3>
<p>見出し３について</p>
</section>
<p class="target">見出し２について</p>
</section>
<p class="target">見出し１について</p>
</body>
使用可能な属性
- 全てのグローバル属性
コンテンツカテゴリ
- フローコンテンツ
- セクショニングコンテンツ
- パルパブルコンテンツ
子要素にしていい要素の種類
- フローコンテンツ
親要素にしていい要素の種類
- 子要素にフローコンテンツが期待されているすべての要素
仕様書と策定状況
最終更新：2016年8月31日
ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。