1. まとめトップ

この記事は私がまとめました

inagawafreakさん

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

sectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう

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

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

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

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

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

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

従来のマークアップでは、<h1><h2><h3>などの見出しレベルによって、暗黙的に階層をもたせていました。しかしこのままでは階層が明確ではないので、「section要素」と「article要素」を使用して明確にすることが推奨されています

article

article要素はブログの投稿や一覧、ニュースサイトの記事、サイトの更新情報ページなど、その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用します。またブログへのコメント、掲示板の投稿にも使われます。必ずしもそのコンテンツ全文が掲載されていなくてもよいようです

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

section

sectionとは章や節や項のように、見出しとそれに関する内容というように階層構造になる範囲を定義する領域になります

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

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

従来通り「section要素」「article要素」を使わずにマークアップすることは可能ですので判断に困る場合は無理に使う必要はありません

ついでにdivとsectionについて

section要素はあくまでも見出しや文章など、意味のあるコンテンツを囲うためのタグですが、div要素はコンテンツがないものでも囲うことができます。例えばレイアウトを組むために要素を囲うのであれば section ではなく div が適しています。

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

1