section要素はHTML5から新たに追加された要素です。

section要素は潜在的に見出しを持つ文書内のセクションを表します。すべてのsection要素は、子要素に少なくとも1つ以上のヘディングコンテンツを含めることで、そのアウトラインの見出しを明示的に識別できるようにするべきです。

使用例のように文脈の途中に登場させることで、その文書のセクションを独立させることができます。また、そのセクションがブログサイトの1つの記事など、そのコンテンツ自体で完結するセクションである場合はarticle要素を用いることを検討するべきです。

本稿執筆時点において、主要なユーザーエージェントでアウトラインアルゴリズムを実装したものは存在しないため、ユーザーにドキュメントの構造を伝える場合は、見出しのレベルを用いて文書構造を示すことを推奨します。

使用例

section要素などのセクショニングコンテンツを用いることで、以下の例に登場するp.target要素がどのセクションに含まれるのかが変化します。

<body>

<h1>見出し1</h1>

<p>見出し1について</p>



<h2>見出し2</h2>

<p>見出し2について</p>



<h3>見出し3</h3>

<p>見出し3について</p>



<p class="target">見出し3について</p>



<p class="target">見出し3について</p>

</body>
<body>

<h1>見出し1</h1>

<p>見出し1について</p>



<section>

<h2>見出し2</h2>

<p>見出し2について</p>



<section>

<h3>見出し3</h3>

<p>見出し3について</p>

</section>



<p class="target">見出し2について</p>

</section>



<p class="target">見出し1について</p>

</body>

使用可能な属性

  • 全てのグローバル属性

コンテンツカテゴリ

  • フローコンテンツ
  • セクショニングコンテンツ
  • パルパブルコンテンツ

子要素にしていい要素の種類

  • フローコンテンツ

親要素にしていい要素の種類

  • 子要素にフローコンテンツが期待されているすべての要素

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2016年8月31日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報