<nav> 是進入 HTML5 之後才加入的導航連結區塊元素，裡面會放入網頁的主要的導覽連結 ( navigational links )，這篇文章將會介紹 <nav> 導航連結區塊元素的用法。

原文參考：導航連結區塊 nav

認識 <nav>

<nav> 是 HTML 裡作為定義導航連結的元素，作用在標示主要的導覽連結，區塊裡面通常會放入清單、超連結...等。

• <nav> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <nav> 的顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，在網頁中會放入一個 <nav>，當中包含三個 <a> 超連結。

<nav>
  <a href="a.html">Google</a>
  <a href="b.html">Yahoo</a>
  <a href="c.html">Facebook</a>
</nav>

<nav> 裡面也常會出現 <ul> 和 <li> 搭配 <a> 的結構。

<nav>
  <ul>
    <li><a href="a.html">Google</a></li>
    <li><a href="b.html">Yahoo</a></li>
    <li><a href="c.html">Facebook</a></li>
  </ul>
</nav>

<nav> 支援屬性

<nav> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <nav> 加入 style 屬性改變背景顏色。

<nav style="background:#ccf;">
  <ul>
    <li><a href="a.html">Google</a></li>
    <li><a href="b.html">Yahoo</a></li>
    <li><a href="c.html">Facebook</a></li>
  </ul>
</nav>

<nav> 預設樣式

下方列出 <nav> 的預設樣式：

nav {
  display: block;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Python 網路爬蟲教學
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• HTML 教學