<nav>: 導航區元素

基線 廣泛可用

此功能已十分成熟,並且在多種裝置和瀏覽器版本中都能正常運作。它自 2015 年 7 月.

<nav> HTML 元素表示頁面中用於提供導航連結的部分,這些連結可以在當前文件或其他文件中。導航區常見的例子有選單、目錄和索引。

嘗試一下

屬性

此元素僅包含 全域性屬性

使用說明

  • 並非所有連結都需要包含在 <nav> 元素中。<nav> 僅用於主要的導航連結塊;通常 <footer> 元素通常有一組不需要包含在 <nav> 元素中的連結。
  • 文件可以包含多個 <nav> 元素,例如,一個用於網站導航,另一個用於頁面內導航。在這種情況下,可以使用 aria-labelledby 來增強無障礙性,請參見 示例
  • 使用者代理(例如針對殘疾使用者的螢幕閱讀器)可以使用此元素來確定是否省略導航內容的初始渲染。

示例

在此示例中,<nav> 塊用於包含一個無序列表 (<ul>) 的連結。使用適當的 CSS,可以將其呈現為側邊欄、導航欄或下拉選單。

html
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav 元素的語義是提供連結。但是,nav 元素不必包含列表,它也可以包含其他型別的內容。在這個導航塊中,連結以散文形式提供

html
<nav>
  <h2>Navigation</h2>
  <p>
    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
    whence the sounds of battle can be heard. To the east you can see a large
    mountain, upon which many <a href="/school">school papers</a> are littered.
    Far up this mountain you can spy a little figure who appears to be me,
    desperately scribbling a <a href="/school/thesis">thesis</a>.
  </p>
  <p>
    To the west are several exits. One fun-looking exit is labeled
    <a href="https://games.example.com/">"games"</a>. Another more
    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
  </p>
  <p>
    To the south lies a dark and dank <a href="/about">contacts page</a>.
    Cobwebs cover its disused entrance, and at one point you see a rat run
    quickly out of the page.
  </p>
</nav>

結果

技術摘要

內容類別 流動內容分節內容,可感知內容。
允許的內容 流動內容.
標籤省略 無,起始標籤和結束標籤都是必需的。
允許的父元素 任何接受流動內容的元素。
隱式 ARIA 角色 導航
允許的 ARIA 角色 不允許使用 role
DOM 介面 HTMLElement

規範

規範
HTML 標準
# the-nav-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱