HTML5のアウトラインは箇条書きで確認すると分かりやすい

最近はHTML5でしかサイト作ってません、うかです、こんにちわ。

このブログもHTML5で作ってるんですが、先日、CSS Nite in NIIGATA, Vol.3に参加した際、アウトラインを確認してみたら、ちょっと違ってるような気がしたので、改めてどういうアウトラインになればいいのか、確認してみました。

作ってるとついつい文書構造を忘れちゃう

HTML5からは「section」、「article」、「nav」、「aside」というタグが加わり、これをもって文書構造を構成するようになりました。

が、ダーっと作ってるとついついその辺を忘れてしまい、適当にsectionを囲っちゃってるというのが私の実態。

トップページのコンテンツを箇条書きに

そこで、まずはこのブログのトップページの内容を箇条書きにしてみることに。

うかブログ-トップページの内容

それぞれの項目ごとにボックスを作成して、記事冒頭のテキストを入れたり、リンク先をリストにしたりしてるわけですが、この箇条書きこそがまさにアウトラインなわけで。

項目ごとにHTML5のタグで囲ってみる

この箇条書きを、HTML5のタグでセクションごとに囲うとこうなります。

うかブログ-トップページのアウトライン

メイン部分の「最新記事」と「新着記事10件」を「section」で囲います。この2つの外側を親sectionで囲ってあげてもいいかもしれませんねー。

サイドバー部分は、JavaScriptで表示しているFacecbookページのLikeボックスを「aside」で、その他は「section」で囲みます。(カテゴリリストあたりは「nav」でもいいかもしれない)

アウトラインが整理できた

と、以上のように箇条書きでコンテンツを書き出したら、ページのアウトラインが整理でき、概ねHTML5のタグを当てることができました。

現状、サイドバーがdivタグで囲まれてるので、その辺を中心にソースを書き直したいと思います。はい。