【HTML5】新しいセクション要素「section（セクション）」と「article（アーティクル）」の違いとは？

「見出しとそれに伴うコンテンツのひとかたまり」のことを「セクション」と呼びます。
HTML5には文書のセクションを意味付けする新要素が追加されており、

section / article / aside / nav

上記4つがこれに該当します、その4つの要素を「セクション要素」と呼びます。
セクション要素は、セクション要素同士を入れ子構造にすることで文書の「アウトライン」を生成し、情報の階層構造を明示する役割を持っています。

今回は定義や使い方がわかりにくいとよく言われている、「section」「article」についてご紹介します。

【section要素】

section要素は「汎用的なセクション」を表す最も基本的な要素です。
単純にひとかたまりの段落として使いたい時はsectionを使います。
意味的に有意義な方法でグループ化されたコンテンツのセクションに適用され、ほとんどの場合見出し要素(hタグ)が必要です。

【article要素】

全てsection要素でよい気もしますが、
「独立した内容ならなるべくarticle使うように」とW3Cの説明にあります。
つまりarticle要素のコンテンツは、『文書からそのセクションだけを取り出しても意味を持つことが可能な、自己完結しているセクション』を意味します。

こちらも、section要素と同じくほとんどの場合見出し要素(hタグ)が必要です。

まずarticleを使えるかどうかを考え、
使えないと判断したらsection、使えるか迷った時もsectionを使うとわかりやすいと思います。

【div要素との違いは？】

div要素は、単体では意味を持たない特殊なタグです。
複数の要素をグループ化させるために使います。
要は、意味的に関係していないコンテンツをまとめる、ということになります。

囲った部分をブロック要素としてまとめて扱うことができるので、CSSを使ったレイアウトで重宝します。

わかりやすくまとめると、
要素内のコンテンツに意味がないのであれば、『div要素』を使い、
意味があるコンテンツで、かつ独立しても成り立つ場合には『article要素』、そうでない場合は『section要素』を使います。