HTML5でコーディングする際の、article、section、divの使い分けについて検討します。
HTML5では、意味的なマークアップやセクショニングの概念が追加され、どの要素を使うべきか迷うことが増えてきました。
今回は、誰もが直面するであろう、article、section、divの使い分けについて考えます。
※細かな定義は割愛し、コーディングの実務上の観点から書いています。
※個人的な理解、独自の解釈によるものが含まれています。誤り・違和感があれば是非ご指摘ください。
そもそもセクションとは何か。
HTML5の最終草案を要約すると
htmlのアウトライン（ページ内のコンテンツのツリー構造）を形作るもの。
body、article、nav、asideによって囲まれた部分がひとつのセクションとなる。
見出しやheader、footerの及ぶ範囲を定義するもの。
だそうです。わかるような、わからないような定義です。そこはかとなく分かるのは、
■セクションは入れ子にして良い（ツリー状であるべき）
■セクションは単なる装飾上のブロックではなく、内容の切れ目である。
■セクションは、ページ全体（body）のヘッダー・フッターとは別に、独自のヘッダー・フッターを持つ（ことができる）
divとsection/articleの使い分け
単なる装飾上のブロックにはarticle、sectionは使わない。
バックグラウンドを敷いたり、幅を固定したり、センタリング・左右寄せしたりするための要素（よく使われる#wrapper、#inner、#container、#left、#rightなど）は、全てdiv。
また、フォント関係やマージン・パディングを取るための要素など、スタイリングのためだけの要素もdivですね。
articleやsectionとは、上位・
下位の関係にはありません。
仮に上記にあたるものでも、内容の区切りになっていれば、articleやsectionを使うべきということになります。
articleとsectionの使い分け
その部分だけ抜き取って、独立したページとして成り立つだけの内容があればarticle、そうでなければsectionを使います。
articleの中にsectionを入れる→OK
sectionの中にsectionを入れる→OK
articleの中にarticleを入れる→たぶんNG（W3Cのバリデーターでは今のところエラーは出ない）
sectionの中にarticleを入れる→たぶんOK
articleに属さないsectionがある→OK
header、見出し、footer以外で、article、section、nav、asideのいずれにも属さない要素がある→OK
こんな場合は？
■問合せや会員登録等に誘導するために、ページの途中や下部に挿入されるブロック（いわゆるレスポンスデバイス）。
footerにあたるものでなければ、sectionでOK。
■サイドバーの中のひと区切り。
リンクの集合であればnav。
テキストや画像がメインのブロックであればsection。
■記事一覧（「新着情報」など）
それがページのメインコンテンツであれば（記事の一覧を閲覧することを目的としたページであれば）article。
サイドバーに副次的に表示されるようなものであれば、nav。
■サイトマップ、リンク集
それがページのメインコンテンツであれば、article。
■１枚の画像、バナー
前後のコンテンツから独立したものであればsection（pやdivでも良い）。
内部リンクの場合はnav（pやdivでも良い）。
包含するセクションの見出しにあたるものであれば、h1～h6。
包含するセクションそのものに関連するもの（アイキャッチ画像など）であればpやdiv。
ページの本旨から外れるものであればasideも可能（広告はNG）