導航元素

<nav> 元素主要用於包含網站主要導航塊的部分，這可以包括指向網頁其他部分的連結 （例如，目錄的錨點） 或其他頁面的連結。

內聯專案

以下將顯示內聯的超連結集。

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

需要時使用列表項

如果內容表示專案列表，請使用列表項來顯示此項並增強使用者體驗。

請注意 role="navigation"，更多內容如下。

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

避免不必要的使用

<footer> 元素可能包含指向站點其他部分的連結列表（FAQ，T＆C 等）。單獨頁尾元素在這種情況下足夠了，你沒有需要與在 <footer> 一個 <nav> 元素，以進一步包裝你的連結。

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

筆記：

• 在 <nav> 中不允許使用 <main> 元素後代

建議將 role="navigation" ARIA 角色新增到 <nav> 元素，以幫助不支援 HTML5 的使用者代理，併為那些支援 HTML5 的使用者代理提供更多上下文。

<nav role="navigation"><!-- ... --></nav>

螢幕閱讀器:( 允許盲人或視障使用者瀏覽網站的軟體）

螢幕閱讀器等使用者代理將根據需要對 <nav> 元素進行不同的解釋。

• 在渲染頁面時，它可以為 <nav> 元素提供更高的優先順序
• 它可能會延遲元素的渲染
• 它可以以特定的方式調整頁面以定製使用者的需求
  示例： 使 <nav> 元素內的文字連結更大，以供視力受損的人使用。

點選這裡閱讀 <nav> 元素的官方 HTML5 規範