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

HTML5からは新しく「セクション」を示すための要素が追加されました。
それらをまとめてセクショニングコンテンツ（要素）と呼びます。

セクションとは章・節・項のような文章のまとまった範囲のことを指します。
多くの場合は、それは見出しから始まり、その見出しの適用される範囲が一つのセクションということになります。
（セクション≠セクショニングコンテンツです）

あるいは、グローバルナビゲーションのような、他の部分と内容がはっきりと区別されるような部分もセクションとして定義されています。

セクションは、section要素をはじめとするセクショニングコンテンツがない場合でも、見出しの階層構造により、「暗黙のセクション」としてブラウザに認識されています。
しかし、W3Cではセクショニングコンテンツを使用して、はっきりと「セクション」を示すように推奨しています。

暗黙のセクションのイメージ

セクションのイメージ（HTML5）

以下の表の　　　　の部分がセクショニングコンテンツ要素です。

セクショニングコンテンツの各要素

section要素

section要素は、章・節・項のような通常は見出しからはじまる一般的なセクションを示すための要素です。
後述のarticle要素、aside要素、nav要素に該当しないセクションに使用します。

また、section要素はCSSなどで表示指定したい場合に使うことはできません。
その場合はdiv要素を使用します。

article要素

article要素は、そのセクションだけで独立した内容となっているセクションを示すための要素です。
新聞や雑誌の一つの記事のようなまとまった内容や、ブログ記事、それに対する各コメントなどに使用します。

例えばブログ記事にarticle要素のタグを付ける場合は、コメント部分を含んだ記事全体を囲み、その後で入れ子のようにしてコメント一つ一つをarticle要素で囲みます。
こうすることで、コメント部分のarticle要素は、記事全体のarticle要素を関連していると意味づけることができます。

aside要素

aside要素は、ページのメインコンテンツには含まれないと考えられるセクションを示すための要素です。
広告を表示するための範囲、記事の紹介文、メインコンテンツの補足記事などの部分で利用されます。

nav要素

nav要素は、ナビゲーション部分のセクションを示すための要素です。
ただし、ナビゲーションと考えられる部分すべてをnav要素でマークアップする必要はありません。
グローバルナビゲーションのみをnav要素でマークアップし、フッター部分のリンクリストなどはfooter要素でマークアップするだけでOKです。

div要素との使い分け

セクショニングコンテンツの各要素は、これまで

というようにdiv要素を使用してきた部分と重なります。
W3Cの考え方に沿えば、これからはできるだけセクショニングコンテンツで示した方が良いようです。

しかしながら、セクションはあくまで文章などの内容のまとまった範囲を示すものなので、セクショニングコンテンツを完全にdiv要素の代わりとして使用するのは間違いです。

使い分けのポイントとして、セクショニングコンテンツの正しい意味をしっかりと把握することが重要です。
まず、header/main/footer要素がセクショニングコンテンツではない、というところから、セクションの考え方を理解するといいかもしれません。

header/main/footer要素に共通しているのは、html文書全体の構造を示す要素であるということです。
（header要素→文書の前置き的内容を示す要素　main要素→文書のメインコンテンツを示す要素　footer要素→文書の付帯情報を示す要素）

一方、セクショニングコンテンツの各要素は、文章の内容を入れ子構造にしてはっきりと区別するために使用します。

このことから、

<div id=”header”>などと、文書そのものの構造を示していたdiv要素はheader/main/footer要素で示す。

<div class=”article/entry”>などと、文書内における文章の構造を示していたdiv要素はセクショニングコンテンツで示す。

というふうに使い分けていくといいと思います。

あと忘れてはならないのは、CSSのためにセクショニングコンテンツを使用しないということですね。
CSSを適用させたい範囲がある場合は、これまで通りdiv要素+class/id属性を使いましょう。

参考

この記事は以下の書籍を参考にして書いています。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

Thanks for reading to the end!!