nav
nav元素是一個(gè)可以用來作為頁(yè)面導(dǎo)航的鏈接組；其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。并不是所有的鏈接組都要被放進(jìn)
元素；例如，在頁(yè)腳中通常會(huì)有一組鏈接，包括服務(wù)條款、首頁(yè)、版權(quán)聲明等；這時(shí)使用 元素是最恰當(dāng)?shù)模恍枰?元素。
一直以來，我們都習(xí)慣用如下這種方式來定義導(dǎo)航條：
<nav><ul><li><a href="index.html">Home</a></li><li><a href="/about/">About</a></li><li><a href="/blog/">Blog</a></li></ul></nav>
下面是W3C給出的一個(gè)代碼示例：
<body><h1>The Wiki Center Of Exampland</h1><nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul></nav><article> <header> <h1> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h1>Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>
HTML5學(xué)習(xí)筆記簡(jiǎn)明版（3）：新元素之hgroup,header,footer,address,nav
nav并不是為了表示所謂導(dǎo)航欄，而是表示"導(dǎo)航性質(zhì)的內(nèi)容"。語(yǔ)義上，導(dǎo)航是跟內(nèi)容無關(guān)的，比如到首頁(yè)的鏈接，到下一篇文章的鏈接，到其它欄目的鏈接等等，但是如果是內(nèi)容本身所引述的的其它文章的鏈接，那么就不宜放在導(dǎo)航里面。
HTML5 里 section article 什么區(qū)別？header footer nav 該怎么理解？
HTML5 很多新的元素容易產(chǎn)生誤解，其中有一部分原因是因?yàn)橛行┰乇旧碛衅缌x，所表達(dá)的語(yǔ)義在規(guī)范中也是在不斷修正的。
并不是指視覺上的導(dǎo)航欄，而是表示帶有導(dǎo)航性質(zhì)的內(nèi)容，準(zhǔn)確的說：
元素表示一個(gè)包含多個(gè)鏈接的區(qū)域，這些鏈接指向其他頁(yè)面或本頁(yè)面的其他部分。
需要注意以下幾點(diǎn)：
并不是所有的鏈接都要放到 nav 元素里面，該元素內(nèi)應(yīng)包含用于構(gòu)成主要導(dǎo)航區(qū)塊的部分。舉個(gè)反例，通常頁(yè)腳有鏈接列表鏈接到網(wǎng)站的其他頁(yè)面，比如：服務(wù)、首頁(yè)、版權(quán)頁(yè)。這種情況下，僅僅用 footer 元素就夠了，沒必要使用 nav 元素。
如果nav 元素里面的內(nèi)容描述的是一個(gè)項(xiàng)目列表，那就應(yīng)該用列表標(biāo)記（ol,ul等）幫助理解（增強(qiáng)語(yǔ)義）和導(dǎo)航。
用戶代理（如屏幕閱讀器）可以通過該元素來確定頁(yè)面上哪些內(nèi)容可以直接跳過或者按要求提供選擇。
所以通常一個(gè)頁(yè)面導(dǎo)航可以這樣寫：
<nav><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></nav>
或者：
<div id="nav"><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></div>
nav 元素還可以用在以下場(chǎng)景：
目錄
上一頁(yè)，下一頁(yè)按鈕，或者分頁(yè)
面包屑導(dǎo)航 html導(dǎo)航菜單為什么都用li+a標(biāo)簽，而不直接用a標(biāo)簽，或者用nav+a標(biāo)簽，html5中導(dǎo)航菜單該怎樣寫？
@丁小倪 的說法有點(diǎn)偏激了。nav元素是區(qū)塊內(nèi)容（sectioning content），也就是會(huì)最終影響文檔大綱（outline）生成的元素。它僅僅反映其內(nèi)容包含導(dǎo)航，但并沒有表達(dá)其內(nèi)容的形式。導(dǎo)航內(nèi)容可以是一個(gè)鏈接的列表，也可以是一段自然文本中內(nèi)嵌了導(dǎo)航鏈接。
按 W3C 對(duì) nav元素的描述（
the nav element
）中給出的適用場(chǎng)景例子，我簡(jiǎn)化一下，用法可以是：
<nav><ul><li><a href="/home">Home</li><li><a href="/about">About</a></li><li><a href="/links">Links</a></li></ul></nav>
也可以是：
<nav><h1>Navigation</h1><p>Welcome to my website. To see latest blog posts, please go to <a href="/blog">my blog</a>. You can find my books and papers in the <a href="/publications">publication</a> section. If you are interested in my work, please contact me by fill in the contact form <a href="/contact">here</a>.</p></nav>
如果內(nèi)容是列表，那用ul>li的方式也是很合適的，并不能說濫用。一個(gè)列表并不會(huì)因?yàn)樗环旁?nav 中就不是列表了，這是內(nèi)容本質(zhì)的問題。nav相比 ul從語(yǔ)義上來說，抽象層次更高，因?yàn)樗踔烈呀?jīng)與內(nèi)容的組織形式解耦了。
而對(duì)于 dd、dl、dt，你可以把它看成一個(gè)名值對(duì)的列表，常與 dfn元素一起使用，比較合適的場(chǎng)景是元數(shù)據(jù)的表達(dá)、詞典的詞條等等。@趙望野 的說法也有點(diǎn)問題，dt與 dd并不需要成對(duì)出現(xiàn)，它們是多對(duì)多的映射（
dl element
）?？梢钥聪?HTML5 Doctor 上的這篇文章：
The dl element
要想對(duì) HTML 元素有更深入的理解，我個(gè)人比較推薦結(jié)合 HTML5 Doctor 上的文章和 HTML5 規(guī)范來閱讀。
做導(dǎo)航欄為什么用ul>li，而不用dd dt dl?