HTML5で追加されたセクショニングコンテンツ

HTML5の登場により、WEBページの区分を、明示的にする事ができるようになりました。正しくセクショニングする事で、ページの文章構造をより明確にする事ができます。

記事を表すタグ

一つの記事の塊を表すのが、「article」タグです。
articleタグで括った部分が、独立した記事になっていて、サイトから切り離しても成り立つ場合につかいます。
イメージとしては、新聞記事のスクラップブックに記事を集める様に、一つ一つの記事が成り立つなら、「article」が使えます。

区分を表すタグ

一つの記事の中の区分を表すのが、「section」タグです。
一つの記事の中に、いくつかの区分がある場合に使います。各々タイトルを付ける必要があります。

記事
 記事のタイトル
   区分1のタイトル
   区分1の本文

 

   区分2のタイトル
   区分2の本文

こんな感じで使います。

サイトの中の主要なナビゲーションを表すタグ

WEBサイトの中で、主要なナビゲーションを括るのに使うのが「nav」タグです。
一般的なWEBサイトの多くに採用されている、グローバルナビゲーションなどを括るのに使います。全てのリンクに付ける訳ではなく、主要なナビゲーションだけです。

サイトの中で補足を表すタグ

WEBページの中で、主たるコンテンツに触れる程度の、補足を表すのが「aside」タグです。
メインのコンテンツほど重要では無いけれど、記事に関連している物を括ります。
デザインに関しては、どこにあっても問題ありません。サイドバーなどに採用される事が多い印象です。

まとめ

XHTML以前は、明示的に区分を表すタグが無かったので、divタグを使い、id属性などで区分を表していました。
しかし、HTML5の登場によって、区分を表すタグが追加され、WEBページの構造をより明確化する事ができる様になりました。
正しく使っていける様にしましょう。