HTML5の新要素navを使ってみる

今回はHTML5の新要素である「nav」を組み込んでみます。

nav要素は、サイトの主要なナビゲーションを表します。「主要」という表現もあいまいで、線引きが難しいところですが。
外部サイトのリンクなど、当サイトに関係のないリンクには使用しません。例えば、グローバルナビゲーションやサイドナビゲーション、パンくずリストがnavで表現するのに適しています。また、いろいろな記事を参考にしていると、一般的にはフッターのメニューにnav要素は用いないようです。
これという決まりはありませんが、どこで線引きするか各々のサイトの構成を考慮して判断したほうがよいかと思います。

以下は、企業ページのグローバルナビゲーションのサンプルです。

<nav>
<ul>
<li><a href="#">ホーム</a>
<li><a href="#">会社概要</a>
<li><a href="#">社長あいさつ</a>
<li><a href="#">採用情報</a>
</ul>
</nav>

また、以下はブログのサイドメニューのサンプルです。

<nav>
<h3>最近の記事</h3>
<ul>
<li><a href="#">記事１</a>
<li><a href="#">記事２</a>
<li><a href="#">記事３</a>
</ul>
<h3>カテゴリ</h3>
<ul>
<li><a href="#">カテゴリ１</a>
<li><a href="#">カテゴリ２</a>
<li><a href="#">カテゴリ３</a>
</ul>
<h3>アーカイブ</h3>
<ul>
<li><a href="#">アーカイブ１</a>
<li><a href="#">アーカイブ２</a>
<li><a href="#">アーカイブリ３</a>
</ul>
</nav>

以前に書いたHTML5関連記事の繰り返しになりますが、Firefoxでnav要素を指定する場合には、cssでブロック要素を指定しなければなりません。また、IEでは要素を認識させる必要があります。詳しくは関連記事を参照してください。

今後はこのnav要素が、クローラーやブラウザが意味のある要素として解釈することになるかもしれません。そうなると、将来、的確に設置することがSEOに関係してくることになるでしょうね。