HTML5のサンプルをもうひとつ作成してみました。section, article, nav, hgroup, aside などいろいろ増えていて、divとの使い分けで悩むことになります。レイアウトとデータの切り分けはStyle Sheet + DOM XHTMLでやろうとしていたのですが、なかなかうまく実現できずに、ここまで来ているように見えます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 サンプル２</title> </head> <body> <!-- header はウェブページのヘッダ情報 --> <header> <h1>header ヘッダータイトル</h1> <!-- nav はナビゲーション用情報 --> <nav> <ul> <li>nav メニュー1</li> <li>nav メニュー2</li> <li>nav メニュー3</li> </ul> </nav> </header> <section> <h1>sectionタイトル</h1> <p> sectionは一般的なセクションを表現。よく使われる用途の セクションは、あらかじめ用意されていて、 ヘッダ情報のheader、フッタ情報のfooter、 記事用のarticle、補足情報用のaside、 ナビゲーション用navがある。 なお、レイアウト目的のコンテナ要素にはdivを使う。 </p> </section> <!-- article は記事情報 --> <article> <h1>articleタイトル</h1> <p> 記事です。図を使う場合はfigure要素を使う。 </p> <figure> <img src="img/sample.jpg" /> <figcaption>figure caption</figcaption> </figure> </article> <article> <!-- hgroup は階層を持つ見出しをセクションの見出しにするときに利用 --> <hgroup> <h1>article用タイトル</h1> <h2>サブタイトル</h2> </hgroup> <p> 見出しと小見出しをまとめて１つの見出しとして表現したい場合はグループ化する。 </p> </article> <!-- asideは補足情報 --> <aside> <h1>aside 補足情報</h1> <p> 従来よりも意味をもつタグが増えているので、レイアウト用タグとの使い分けが難しい。 </p> </aside> <!-- footer はコピーライトなどのフッタ情報 --> <footer> フッタ情報 ... Copyright hiro345 2011 </footer> </body> </html>