nav 要素主要なナビゲーションを表す

nav 要素は文書内の主要なナビゲーションのセクションを表します。

文書内にあるリンクがすべて nav 要素に含まれる必要はありません。主要なナビゲーションを含むセクションのみに使用します。主要なナビゲーションとは、例えばそのウェブサイト内で共通で使われている、所謂グローバルナビゲーションや、ブログのサイドメニューによくある、カテゴリー一覧などのリンクブロック、あるいは文書内で各セクションに移動するためのリンクブロックなどが該当するかもしれません。

文書のフッタに文書間を移動するリンクがあったとしても、そのセクションが文書のフッタとして扱うのが妥当な場合は、footer 要素を使用するべきです。

なお、nav 要素はセクショニング・コンテンツですので、アウトラインを生成しますが、見出しがないセクションとなってもその性質上、特に問題はないと思われます。

もし、見出しを含まない場合は、aria-label 属性を使用して、nav 要素対し、ナビゲーションを識別できる固有のラベルを付与するとよいでしょう(サンプルソース参照)。

nav 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性

nav 要素のサンプルソース

<nav aria-label="メインメニュー">
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/blog">ブログ</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>
<nav>
  <h1>メインメニュー</h1>
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/blog">ブログ</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.4.4 The nav element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ