HTML5化した後、アウトラインがおかしかったところを修正したり、WAI-ARIAを導入したり、少し調整してたりしました。まだまだ行き届いていない所があるし、本当にこれでいいのとか色々座りが悪い感じですね。
body | +--header role="banner" | | | +--h1 | | | +--nav | +--div id="main" role="main" | | | +--section or article or nav | +--footer role="contentinfo" | +--address | +--section
おおよそのページで共通の部分は以上のような形になっています。div#mainがちょっとアレな気がしますね。本当はページによってarticle要素にrole="main"持たせたりとか色々ちゃんとしたいところなんですが、Blosxomのflavour (テンプレート)を書くのが面倒になって妥協しました。これに補助ナビゲーションやら広告やらいいね！ ボタンが追加されるわけです。
body | +--header | +--div id="main" role="main" | | | +--article | +--nav class="paging" | +--footer
ページング・ナビゲーションはbody直下に置きました。HTML5化した当初はarticle要素直下にスタイリングの都合上配置してたりしました……。ページングと同じく同一サイト内のコンテンツにリンクする「関連するエントリ」ならaside/navとして、一覧ページからpermalinkへリンクする「続きを読む」というようなものの場合はnavとしてそれぞれarticle要素直下に配置した方が良いと思います。
body | +--header | +--div id="main" role="main" | | | +--article | | | +--aside class="adsense" | +--footer
広告もコンテキスト広告のようなものであってもarticle要素には含めない方が良さそうです。Google AdSenseの場合は親のセクションを見てマッチングを調節とか、自動でセクション ターゲットをやってそうな気がしますけどどうなんですかね？ #main直下なのは配置上の都合(article要素の間に挟みたいという都合)なので良くないですね。CSSで要素をコピーしてまったく別の場所に移動させるとかできるようになる何かがあったような気がしますが、思い出せません……。HTML5とWAI-ARIAの関係においてaside要素はデフォルトでnoteロールとなってたりするので、complementalyとか指定した方が良さそうですが、complementalyもなんか違うなぁという感じでまだ何も指定していません……。
body | +--header | +--div id="main" role="main" | | | +--article | | | +--aside class="like" | +--footer
対していいね！ ボタンはその対象となるセクショニング・コンテンツ(かセクショニング・ルート)の要素に属する形で置くべきでしょう。ブログの記事などの場合はこのようにarticle要素の直下が、Webサイトのホームページの場合はbody要素直下が適切な場所になると思います。はてなスターもいいね！ ボタンと同様の扱いをすべきですがこれもまた配置の都合上で……ごにょごにょ。
まぁ以上でわかるように同じ要素・同じクラスで違う階層にあったりとかするので、繰り返し使うことになるasideやnav要素等にあまりスタイルを当てることができなかったりします。複雑怪奇なセレクタルールで上書きしまくらないとならなくなるので。加えてIDをCSSで使わないようにする強化月間中なのでCSSを書くのが結構辛かったですが、なんとなく慣れてきました。隣接セレクタを使ってたりもするのでプロダクション・レベルで使えるような知識では今のところありませんが、やろうと思えば結構出来るもんですね。
複雑なクラス指定と馬鹿丁寧なセレクタによって自由自在にデザインすることができますが、その反面それではCSSコードのポータビリティが失われます。HTMLレベルから手を加えるようなCSSフレームワークで揃えるならそのポータビリティはあまり問題にならないでしょうが、まぁそううまくはいかないですよね。リセットからノーマライズへというのもそういうCSSコードそれ自体のポータビリティを確保するという理由もあるんじゃないかなと思います。DOM操作によるリペイントやリフローの問題とかもあるので、一概に「ID使うな！ クラス指定も減らせ！」とは言えないんですけどね。
HTML5では否応なく文書構造を意識せざるを得ないので、実際にHTML5としてインターネット上に公開しなくても手持ちの(X)HTMLの文書をHTML5化してみると、その(X)HTMLの構造がどういう問題を抱えているかなどがよくわかると思います。精神衛生上良くないですけどね！