<nav>: 導航區元素
<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>
結果
技術摘要
規範
| 規範 |
|---|
| HTML 標準 # the-nav-element |
瀏覽器相容性
BCD 表格僅在瀏覽器中載入