<section></section>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / セクショニング・コンテンツ / パルパブル・コンテンツ
利用場所 セクショニング・コンテンツが置ける場所
内容 フロー・コンテンツ

section要素は、一般的なセクションを表します。他のセクショニング・コンテンツには該当しないセクションで使用します。

この要素の内容には、見出しが含まれているのが自然です。（しかし、必須ではありません）


<section>

1つのセクションを表します

</section>

section要素は、その範囲が意味的な1つのまとまりであることを表します。

例えば、1つ記事の中に複数の項目が存在する場合は、section要素を使って次のように記述することができます。

<article>

<h2>記事のタイトル</h2>

<section>
<h3>項目1の見出し</h3>
...
</section>

<section>
<h3>項目2の見出し</h3>
...
</section>

</article>

また、section要素を入れ子にすることで、章セクション内の節セクションを表すこともできます。

<section>
<h3>第2章</h3>

<section>
<h4>2-1</h4>
...
</section>

<section>
<h4>2-2</h4>
...
</section>

</section>

他の要素も検討してみる

そのセクションに次のような意味がある場合には、その意味に適した要素を使用するようにします。

  • そのセクションが1つの完結した記事である場合 → article要素
  • そのセクションが主要なナビゲーションである場合 → nav要素
  • そのセクションが補足的なコンテンツである場合 → aside要素

また、その範囲をグループ化したいだけの場合は、main要素またはdiv要素を使用するようにします。

  • 文書のメインとなる範囲をグループ化したい場合 → main要素
  • レイアウトのためだけにグループ化したい場合 → div要素
  • スクリプトから参照される範囲を示したいだけの場合 → div要素
旧HTMLからの変更点
  • HTML5：section要素が定義されました。
  • HTML LS：利用場所が微妙に変わりました。（フロー・コンテンツが置ける場所 → セクショニング・コンテンツが置ける場所）

使用例

記事内で使用した例

<article>

<h2>section要素について</h2>
<p>section要素に関する説明です。...</p>

<section>
<h3>概要</h3>
<p><dfn>section要素</dfn>は、一般的なセクションを表す要素です。...</p>
</section>

<section>
<h3>使い方</h3>
<p>記事内でこの要素を使用する場合は、次のように記述します。...</p>
</section>

</article>
表示例

section要素について

section要素に関する説明です。...

概要

section要素は、一般的なセクションを表す要素です。...

使い方

記事内でこの要素を使用する場合は、次のように記述します。...

サイドバー内で使用した例

<aside>

<h2>サイトナビ</h2>

<nav>

<section>
<h3>HTMLリファレンス</h3>
<ul>
<li><a href="html/basic.html">HTMLの基本</a></li>
<li><a href="html/elements.html">HTML要素一覧</a></li>
</ul>
</section>

<section>
<h3>CSSリファレンス</h3>
<ul>
<li><a href="css/basic.html">CSSの基本</a></li>
<li><a href="css/properties.html">CSSプロパティ一覧</a></li>
</ul>
</section>

</nav>

</aside>