section要素はdivタグと同じような使い方をしない

sectionタグはdivなど、要素を大枠で括って使用していたものと置き換えるのではなく、
見出しを含む文章や章、段落などをひと塊として扱います。

間違い例

<section>
　<div id="header">
　　<h1>sitename</h1>
　</div>
　<!--****//header ****-->

　<div id="contentsWrap">
　　contents
　</div>
　<!--****//contentsWrap ****-->

　<div id="footer">
　　footer
　</div>
　<!--****//footer ****-->
</section>

上記のように、全てをsectionタグで梱包してはいけません。

正しい例

<div id="wrapper">
　<div id="header">
　　<h1>sitename</h1>
　</div>
　<!--****//header ****-->

　<div id="main">
　　<section>
　　　contents1
　　</section>

　　<section>
　　　contents2
　　</section>
　</div>
　<!--****//main ****-->

　<div id="footer">
　　footer
　</div>
　<!--****//footer ****-->
</div>

情報を細分化し、以下のようにmainタグ内生成し、要素ごとに区切って使う事が望ましいです。
なお、sectionタグ内に見出し要素がない場合はarticleタグ、重要でない要素にはasideと使いわけます。

header要素、hgroup要素は必要な場合のみ使用する

headerは各ページの上部に付けるだけではなく、
各要素の見出し、イントロダクション、ナビゲーションなど、
情報の導入部分や誘導部分との梱包として使用する事が望ましいタグです。
また、hgroupも見出し要素に使用するのですが、
こちらは要素ごとに対し小見出しやキャッチフレーズ等が複数ある場合、
それらをひと塊として扱うために使用します。

header間違い例

<section>
　<header>
　　<h1>pagename</h1>
　</header>
　<p>read</p>
</section>
<!--****//header ****-->

sectionタグ内でアウトラインが生成できており、尚且つ見出し要素が一つしかありませんので、
この場合headerタグは必要ありません。

header正しい例

<section>
　<h1>pagename</h1>
　<p>read</p>
</section>
<!--****//header ****-->

hgroup間違い例

<header>
　<hgroup>
　　<h1>pagename</h1>
　　<h2>promoword</h2>
　</hgroup>
</header>
<!--****//header ****-->

header内にhgroup要素しかない場合は、headerタグを使用しなくてもいいです。

hgroup正しい例

<hgroup>
　<h1>pagename</h1>
　<h2>promoword</h2>
</hgroup>
<!--****//header ****-->

header要素、hgroup要素は、同じ意味合いのタグで囲まれていれば生成せずに使用することが望ましいとされています。

nav要素

nav要素にはサイト内の誘導するナビゲーション要素が入りますが、
全てのナビゲーション要素をnavタグで囲むことは望ましくありません。
特にグローバルナビゲーションやサイト内検索、ページ内リンクなど、
サイトにとって主要なものに関してはnav要素を使い、
サイトを分割するページャーやブログのタグなど、
優先度の低いものには使用しないとする方がよいとされています。

navタグを使用する際には、この要素がこのサイトにとって主要となるナビゲーションか？
navタグで囲む物がsectionタグ等で梱包できないか？
などを基準にし設置しましょう。


今回はよく使用するHTML5の一部だけのご紹介ですが、
よりサイト内の情報に気をつけてマークアップする事が重要です。

(kazuki)