HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

今回は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="#">記事1</a>
<li><a href="#">記事2</a>
<li><a href="#">記事3</a>
</ul>
<h3>カテゴリ</h3>
<ul>
<li><a href="#">カテゴリ1</a>
<li><a href="#">カテゴリ2</a>
<li><a href="#">カテゴリ3</a>
</ul>
<h3>アーカイブ</h3>
<ul>
<li><a href="#">アーカイブ1</a>
<li><a href="#">アーカイブ2</a>
<li><a href="#">アーカイブリ3</a>
</ul>
</nav>

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

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

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search