HTML5初心者のうなです。
HTML5でサイトを作ったときにハマったことの多くが
sectionに関することばかりだったのでセクショニングコンテンツのお話をしようと思います！
＊セクショニングコンテンツって？
セクショニングコンテンツはHTML5から新たに追加された要素です。
今まではh1~h6タグを利用して暗黙的に行われていたセクショニングがセクショニングコンテンツを利用することにより
明示的にすることが可能になりました！
*sectionとarticleについて
W3C - HTML 5 differences from HTML 4の日本語訳(http://html5.jp/trans/w3c_differences.html)を見てみると、
-section
一般的なドキュメント、または、アプリケーションのセクションを表します。
h1, h2, h3, h4, h5, h6 と一緒に使うことで、ドキュメント構造を表すことができます。
-article
ブログエントリや新聞記事のような、ドキュメントの単独で成り立つコンテンツを表します。
これだけじゃわけがわからないよ！！！／人° ‿‿ °人＼
簡単に使い分けを説明すると
sectionは
＊nav,article,asideなどどれにも該当しない時に使う
＊見出しが無いとだめ
＊articleの中の小見出しなどに使える
articleは
＊RSSフィードで読み込んで1つの記事として成り立っているかを考える
＊内容が独立していれば入れ子にできる
sample
ちょっとわかったひとのちょっとためになる section - jsdo.it - share JavaScript, HTML5 and CSS
*navの使い方について
navってナビゲーションでしょ！？
私のサイト、ナビゲーションいくつも入れてるから全部navで括って良いんじゃないの？ と思いがちですが
navは主要なナビゲーションになるセクションだけに適用しましょう！
*divとsectionについて
HTML5にsection要素ができたので
「もうdivとかいらないんじゃないの…?」
と思った時期が有りました。
しかし、
＊セクションがいつ仕様がかわるかわからないということ
＊アウトライン≠レイアウト構造であること
＊IE9未満では対応していないこと
を考えると、
現在はセクションは文書構造のsectionは文章のまとまりを分けるためだけに利用して
レイアウト目的でのマークアップの際は従来通りdivを指定した方がよさそうです。
ちょっとわかったひとのちょっとためになる section - jsdo.it - share JavaScript, HTML5 and CSS
*便利なアウトラインチェッカー
http://gsnedders.html5.org/outliner/
-HTML 5 Outliner(HTML5のアウトラインチェックツール)
https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo
-HTML5 Outliner(Googlechromeの拡張機能)
http://d.hatena.ne.jp/amachang/20090915/1252999677
-HTML5 のセクションアウトラインを生成してみよう！（アウトラインを表示するブックマークレット）
*アウトラインの参考になるサイト、ブログ
HTML5でサイトをつくろう
ヨモツネット
