nav
nav元素是一個可以用來作為頁面導航的鏈接組;其中的導航元素鏈接到其他頁面或當前頁面的其他部分。并不是所有的鏈接組都要被放進
元素;例如,在頁腳中通常會有一組鏈接,包括服務條款、首頁、版權聲明等;這時使用 元素是最恰當?shù)?,而不需?元素。
一直以來,我們都習慣用如下這種方式來定義導航條:
<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給出的一個代碼示例:
<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學習筆記簡明版(3):新元素之hgroup,header,footer,address,nav
nav并不是為了表示所謂導航欄,而是表示"導航性質的內(nèi)容"。語義上,導航是跟內(nèi)容無關的,比如到首頁的鏈接,到下一篇文章的鏈接,到其它欄目的鏈接等等,但是如果是內(nèi)容本身所引述的的其它文章的鏈接,那么就不宜放在導航里面。
HTML5 里 section article 什么區(qū)別?header footer nav 該怎么理解?
HTML5 很多新的元素容易產(chǎn)生誤解,其中有一部分原因是因為有些元素本身有歧義,所表達的語義在規(guī)范中也是在不斷修正的。
并不是指視覺上的導航欄,而是表示帶有導航性質的內(nèi)容,準確的說:
元素表示一個包含多個鏈接的區(qū)域,這些鏈接指向其他頁面或本頁面的其他部分。
需要注意以下幾點:
并不是所有的鏈接都要放到 nav 元素里面,該元素內(nèi)應包含用于構成主要導航區(qū)塊的部分。舉個反例,通常頁腳有鏈接列表鏈接到網(wǎng)站的其他頁面,比如:服務、首頁、版權頁。這種情況下,僅僅用 footer 元素就夠了,沒必要使用 nav 元素。
如果nav 元素里面的內(nèi)容描述的是一個項目列表,那就應該用列表標記(ol,ul等)幫助理解(增強語義)和導航。
用戶代理(如屏幕閱讀器)可以通過該元素來確定頁面上哪些內(nèi)容可以直接跳過或者按要求提供選擇。
所以通常一個頁面導航可以這樣寫:
<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 元素還可以用在以下場景:
目錄
上一頁,下一頁按鈕,或者分頁
面包屑導航 html導航菜單為什么都用li+a標簽,而不直接用a標簽,或者用nav+a標簽,html5中導航菜單該怎樣寫?
@丁小倪 的說法有點偏激了。nav元素是區(qū)塊內(nèi)容(sectioning content),也就是會最終影響文檔大綱(outline)生成的元素。它僅僅反映其內(nèi)容包含導航,但并沒有表達其內(nèi)容的形式。導航內(nèi)容可以是一個鏈接的列表,也可以是一段自然文本中內(nèi)嵌了導航鏈接。
按 W3C 對 nav元素的描述(
the nav element
)中給出的適用場景例子,我簡化一下,用法可以是:
<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的方式也是很合適的,并不能說濫用。一個列表并不會因為它被放在 nav 中就不是列表了,這是內(nèi)容本質的問題。nav相比 ul從語義上來說,抽象層次更高,因為它甚至已經(jīng)與內(nèi)容的組織形式解耦了。
而對于 dd、dl、dt,你可以把它看成一個名值對的列表,常與 dfn元素一起使用,比較合適的場景是元數(shù)據(jù)的表達、詞典的詞條等等。@趙望野 的說法也有點問題,dt與 dd并不需要成對出現(xiàn),它們是多對多的映射(
dl element
)。可以看下 HTML5 Doctor 上的這篇文章:
The dl element
要想對 HTML 元素有更深入的理解,我個人比較推薦結合 HTML5 Doctor 上的文章和 HTML5 規(guī)范來閱讀。
做導航欄為什么用ul>li,而不用dd dt dl?