【HTML5】”article”と”section”の使いどころ

inagawafreak

html5で定義がいまいち曖昧な要素「article」と「section」

sectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ | コリス

分かってるつもりでも、あれ?これどっちだろうってなる事ありませんか……?

HTML5の要素の分類(コンテンツ・モデル)

メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 HTML5におけるこれらのコンテンツの種類の定義は「コンテンツ・モデル」と呼ばれます
HTML5における要素の分類(コンテンツ・モデル)-HTML5リファレンス

HTML4.01では要素は大きくブロックレベル要素とインライン要素のいずれかに分類されていますが、 HTML5ではブロックレベル要素とインライン要素の分類は無くなります。

セクショニングコンテンツ…article 、aside、 nav、 section

※nav、asideについては割愛しまとめています。

従来のマークアップでは、

などの見出しレベルによって、暗黙的に階層をもたせていました。しかしこのままでは階層が明確ではないので、「section要素」と「article要素」を使用して明確にすることが推奨されています
もう悩まない!HTML5の「section要素」と「article要素」の違いについて | Web制作会社スタイル

article

article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。またブログへのコメント、掲示板の投稿にも使われます。必ずしもそのコンテンツ全文が掲載されていなくてもよいようです
第5回目 HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう | Webデザインとグラフィックの総合情報サイト – MdN Design Interactive –

独立したコンテンツとは『RSSフィードで読み込こまれた際に1つの記事として成り立っているか』ということを基準にすると良いようです。

section

sectionとは章や節や項のように、見出しとそれに関する内容というように階層構造になる範囲を定義する領域になります
divとsectionとarticleの区別がいまいちつかない | HTML | Horic Design

sectionはあくまでアウトライン、一つのコンテンツはarticleを使う
[HTML5]アウトラインで迷わない! sectionと見出しについて – WEBCRE8.jp

コンテンツ内のテーマでまとめられた部分がsectionということ。
そしてsectionを使う時はh1タグとセットで使う事が強く推奨されています。

意味を持たないコンテンツorどっちにしたら良いかの判別がつかない場合

従来通り「section要素」「article要素」を使わずにマークアップすることは可能ですので判断に困る場合は無理に使う必要はありません
もう悩まない!HTML5の「section要素」と「article要素」の違いについて | Web制作会社スタイル

ついでにdivとsectionについて

section要素はあくまでも見出しや文章など、意味のあるコンテンツを囲うためのタグですが、div要素はコンテンツがないものでも囲うことができます。例えばレイアウトを組むために要素を囲うのであれば section ではなく div が適しています。
文書構造を意識しながらHTMLマークアップしよう! | Webクリエイターボックス

アウトラインで悩んだら「HTML 5 Outliner」先生まで

https://matome.naver.jp/odai/2145861873498266601
2016年10月17日