导航元素

<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 规范