<nav>ナビゲーションを示す

<nav>タグは、そのサイト内のナビゲーションを示す要素です。 一般的には、サイト内の主なコンテンツへのリンクを表すグローバルナビゲーションやプライバシーポリシー、フッターナビゲーションなどに使用されます。

ですが<nav>は、ナビゲーションであると考えられる全ての部分に対して使用すべきではありません。 あくまでも、そのセクションが主要なナビゲーションであると考えられる箇所に対してのみ使用します。

ですのでa要素の集合セクションに対し適用するのではなく、そのサイト内において、ユーザーがページ移動する際に優先的に利用するような場所にnav要素を使用するようにします。 例えばフッターにある項目数の少ないナビゲーション的なリンクについては、通常はfooter要素内に入れておくだけで十分となります。

またnav要素の中にはリンク以外のコンテンツを含める事ができます。 例えばリンクのグループの前には、h1タグなどの見出し要素を入れる事も可能です。

HTML4.01以前のナビゲーションには、「div id="nav"」というようにdiv要素が使われていた事が多かったかもしれません。 ですがそのサイトにおけるグローバルナビゲーションには、目次に該当するような重要な情報が含まれています。

そしてフッターナビゲーションにはそのサイトにおける重要、あるいは共有すべきようなリンクが含まれています。 検索エンジンはこのnav要素内の情報を重要視している可能性もあります。 ですので主要なナビゲーションにはdiv要素やsection要素は使用せず、nav要素を利用するようにしましょう。

HTML5での変更点

nav要素は、HTML5で追加された要素です。

書式

  • <nav 属性="値">~</nav> ……… 文書内のナビゲーション部分を示す

使用した時の例

<nav>
<h4>メニュー</h4>
<ul>
  <li><a href="https://www.yuu-diaryblog.com/">トップページ</a></li>
  <li><a href="/hp-web/html5/">HTML5リファレンス</a></li>
  <li><a href="/hp-web/css/">CSSリファレンス</a></li>
</ul>
</nav>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <nav>~</nav> カテゴリ フローコンテンツ, セクショニングコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~