HTML5の要素「section」の使い方

HTML5で新たに追加された要素section
今更にはなりますが、使用方法を再確認したのでメモ。

基本の使い方

section要素は、汎用セクションを表す。
セクションとは、見出しとコンテンツによって構成される、グループ化可能な情報・機能のこと。
それぞれのsection要素は、子要素に見出しとしてh1~h6のいずれかの要素を含むことが推奨される。

section要素のコンテンツモデル

コンテンツカテゴリー

  • フローコンテンツ
  • セクショニングコンテンツ
  • パルパブルコンテンツ

含むことができるカテゴリー

  • フロー・コンテンツ

留意すること

  • section要素はaddress要素の子孫要素として配置してはならない。

section要素とarticle要素の違いと使い分け

内容が単独で意味を成す集合である場合、section要素ではなく、article要素を使うべきとされる。
内容が特定の意味を持つ場合、articleをはじめとするsection以外の要素、navやaside,header,footerといった要素が使用されることがあり、それらの要素が適さない場合にsection要素を用いる。

section要素とdiv要素の違いと使い分け

section要素の内容は、意味のあるひとまとまりの情報・機能を示す。
一方でdiv要素は、それ自体が意味を持たない。

使用時の判断方法としては、その内容に見出しをつけることができるかどうか、と考えてみると良い。
見出しをつけられる、つまりその内容が一つの意味を持つものであるならsection要素を使用する。
見出しをつけられない、つまり明確な意味を持たない内容である場合はdiv要素を用いたほうが良いかもしれない。