<section> - セクション

• トップ
• HTMLリファレンス
• <section>

• 概要
• 説明
• 属性
• 使用例
• 詳細
  • 子セクションのヘッダに関する仕様変更
• 関連項目
• リンク

概要

形式

<section>～</section>/dd>

サポート

https://caniuse.com/mdn-html_elements_section

カテゴリ

フローコンテンツ

セクショニングコンテンツ

パルパブルコンテンツ

親要素

フローコンテンツ を子要素に持てるもの

子要素

フローコンテンツ

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

説明

HTML5 で新たに追加された要素で、一般的なセクション(章)を記述します。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

使用例

セクションの中では、セクションの外とは独立したアウトラインを形成します。例えば、下記のような文書をケースに説明します。

<h1>AAA</h1>
<p>aaa...</p>
<h2>BBB</h2>
<p>bbb...</p>
<h2>CCC</h2>
<p>ccc...</p>

これを、sectionで表現すると次のようになります。

<section>
  <h1>AAA</h1>
  <p>aaa...</p>
  <section>
    <h2>BBB</h2>
    <p>bbb...</p>
  </section>
  <section>
    <h2>CCC</h2>
    <p>ccc...</p>
  </section>
</section>

詳細

子セクションのヘッダに関する仕様変更

HTML5 では、セクションの中と外はアウトラインが独立しているため、セクションの中の h2 を h1 で表記しても構わないとされました。

<section>
  <h1>AAA</h1>
  <p>aaa...</p>
  <section>
    <h1>BBB</h1>
    <p>bbb...</p>
  </section>
  <section>
    <h1>CCC</h1>
    <p>ccc...</p>
  </section>
</section>

これを、Google Chrome の HTML5 Outliner などの HTML5 アウトライン表示ツールで表示すると下記の様に、BBB や CCC は、AAAセクションの子セクションになります。

1. AAA
   1. BBB
   2. CCC

しかし、HTML 5.1 では上記の仕様は廃止され、子要素の section には、<h1> ではなく、<h2> を用いるように再度仕様変更されています。

関連項目

• <article>
• <nav>
• <aside>
• <header>
• <footer>
• <hgroup>

リンク

• https://html.spec.whatwg.org/multipage/sections.html#the-section-element
• https://developer.mozilla.org/ja/docs/HTML/Element/section
• https://caniuse.com/mdn-html_elements_section

---