<section> - セクション

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

概要

形式
<section>~</section>
サポート
LS / H5 / e9 / Ch5 / Fx4 / Sa4.1 / Op11.1
カテゴリ
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
フローコンテンツ
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

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

属性

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

使用例

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

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

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

HTML
<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 で表記しても構わないとされました。

HTML
<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>

リンク


Copyright (C) 2011-2017 杜甫々
初版:2011年6月11日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/section.htm