HTML5|on Note

HTML5で使用する要素

on Note

section要素

section要素は、ドキュメントにおける章や節、項といった区切り(セクション)を表すと同時に、階層構造(アウトライン)を明示的に定義する要素である。

セクションは見出しを含んだ内容ごとに区切った各部分を意味する。よって、section要素で区切られた各内容には必ず見出しが含まれる。section要素を使うべきか迷った時は、このに見出しを含めることができるかどうかで判断するのも良い。

section要素は、ドキュメントの構成が論理的に分割されている場合などに使用する、文章の論理構造を表す為の最も基本となる要素である。

HTML5での分類
Flowコンテンツ,Sectioningコンテンツ
指定できる属性
グローバル属性
子要素にできるもの
Flowコンテンツ

section要素の記述例

<section>
<h1>見出し</h1>
セクション内のコンテンツ
</section>

Flowコンテンツの記述箇所で使用できる。

body要素直下でのsection要素

body要素は「sectioning・ルート」に属している為、body要素直下で全体を、section要素でマークアップする必要はない。

これまでのHTMLでのセクションは

ドキュメントは本来、最初に見出しがありそれに関する文章が続く、セクションの塊である。

これまでは、例えばサイト名にあたる部分を<h1>タグにし、各連載のタイトルにあたる部分を<h2>タグ、各連載記事タイトルを<h3>タグという風にマークアップしてきた。しかし、どこまでが1つのセクションで構成されているかを明示的に示すことができなかった。

これまでのマークアップでも見出しタグの使い分けによって階層を持ったドキュメントに見えるのだが、マークアップ上は同じ階層に位置しているにすぎない。つまり、暗黙に階層化しているだけだった。

メニュー