nav要素は、大事な移動リンクのまとまりを示します

ページには、サイトのほかのページへ行くリンクや、同じページの別の場所へ移動するリンクがあります。nav要素は、そうした移動先を案内する大事なリンクのまとまりを示します。

先に結論

最小の例

<nav aria-label="サイト内の案内">
  <ul>
    <li><a href="/about/">このサイトについて</a></li>
    <li><a href="/topics/">トピック一覧</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

navはリンクのまとまりの意味を示します。移動を行うのは中のa要素です。navを追加しただけで、見た目やリンクの動きが変わるわけではありません。

どんな案内に使う？

• サイトの主なページへ移動するメニュー
• 記事の見出しへ移動する目次
• いまのページまでの道順を示すパンくずリスト
• 同じサイト内の前後のページへ移動する案内

目安は、「このリンクのまとまりを、ページ上で移動用の案内としてすぐ見つけられると便利か」です。見た目がメニューのようでも、主な移動先を案内する目的がなければ、navは必要ありません。

目次には名前を付ける

1つのページに案内のまとまりがいくつかあるときは、それぞれの目的が分かる名前を付けます。たとえば、サイト全体の案内、パンくずリスト、ページ内の目次は別々の案内です。

<nav aria-label="このページの内容">
  <ol>
    <li><a href="#meaning">navの意味</a></li>
    <li><a href="#examples">使い方</a></li>
  </ol>
</nav>

名前にはaria-labelまたは見出しを使ったaria-labelledbyを利用できます。異なる案内には、それぞれ違う名前を付けます。同じリンクを同じ形で繰り返す案内なら、同じ名前を使えます。ページに案内が1つだけなら、名前は必須ではありません。

リスト以外も入れられる

navの中身は、必ずしもulやolである必要はありません。HTMLの仕様では通常の文章なども入れられます。リンクの順番に意味があるなら番号付きリスト、順番が特に大切でないなら箇条書きにするなど、中身の形は案内に合わせて選びます。

よくある間違い

• ページ内のリンクをすべてnavで囲む
• サイトのメニュー、目次、パンくずリストに同じ名前を付ける
• navを付ければ、中の文字がリンクになると思う
• 見た目だけを変えるためにnavを使う

短い利用規約リンクなど、ページの移動案内として目立たせる必要がないリンクの並びは、通常の段落やリストのままで十分です。

Atlasで詳しく確認する

仕様上の意味とContent model、navigation landmarkとしての対応、複数の案内に付ける名前、ブラウザー・WPT・Accessibility Treeの観測は、Yugien Atlasのnav要素ページで確認できます。ページの中心となる内容を示すmainについては、main要素の説明もご覧ください。