HTML 導覽 nav：主要導覽連結的正確用法

Q: 一頁可以有多個 nav 嗎？

可以。主選單、麵包屑、頁尾的網站地圖都能各自是一個 nav。此時請用 aria-label 分別命名，輔助工具列出地標時才分得出誰是誰。

Q: nav 裡面一定要用清單嗎？

不是強制，但建議。一組導覽在語意上就是一份清單，用 ul 包起來後，螢幕閱讀器會先告知共有幾個項目，使用者比較好掌握。

用於標示主要的導覽連結，<nav> 區塊內通常會放入清單、超連結...等。只有成組的主要導覽才需要它，內文中零散的連結不必包進來；一頁有多組導覽時再用 aria-label 區分，螢幕閱讀器就能直接跳到指定的那一組。

html

<nav>
  <ul>
    <li><a href="/">首頁</a></li>
    <li><a href="./about.html">關於我們</a></li>
    <li><a href="./products.html">產品介紹</a></li>
    <li><a href="./contact.html">聯絡我們</a></li>
  </ul>
</nav>

小提醒

並不是所有的連結都要包覆在 <nav> 中，<aside>、<footer> 內的連結就不需要包覆在 <nav> 裡面。

適合放進 nav 的內容

網站的主選單
麵包屑（目前位置的路徑）
分頁導覽（上一頁、下一頁）
側邊的章節目錄

至於內文中出現的單一連結、頁尾的零散連結，維持原樣即可。

一頁有多組導覽時

用 aria-label 分別命名，輔助工具列出頁面地標時才分得出誰是誰：

html

<nav aria-label="主選單">...</nav>

<nav aria-label="麵包屑">
  <ol>
    <li><a href="/">首頁</a></li>
    <li><a href="/html/what-is-html">HTML</a></li>
    <li>導覽 nav</li>
  </ol>
</nav>