<section> - セクション
目次
概要
- 形式
<section>
~</section>
/dd>- サポート
- https://caniuse.com/mdn-html_elements_section
- カテゴリ
- フローコンテンツ
- セクショニングコンテンツ
- パルパブルコンテンツ
- 親要素
- フローコンテンツ を子要素に持てるもの
- 子要素
- フローコンテンツ
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
説明
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> を用いるように再度仕様変更されています。
関連項目
リンク
- 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
Copyright (C) 2011-2017 杜甫々
初版:2011年6月11日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/section.htm