|
三、不要把所有列表式的鏈接放在nav里
隨著HTML5引入了30個(gè)新元素（截止到原文發(fā)布時(shí)），我們?cè)跇?gòu)造語(yǔ)義化和結(jié)構(gòu)化的標(biāo)簽時(shí)的選擇也變得有些不慎重。也就是說(shuō)，我們不應(yīng)該濫用超語(yǔ)義化的元素。不幸的是，nav就是這樣一個(gè)被濫用的例子。nav元素的規(guī)范描述如下：
nav元素表示頁(yè)面中鏈接到其他頁(yè)面或者本頁(yè)面其他部分的區(qū)塊；包含導(dǎo)航連接的區(qū)塊。
注意：不是所有頁(yè)面上的鏈接都需要放在nav元素中——這個(gè)元素本意是用作主要的導(dǎo)航區(qū)塊。舉個(gè)具體的例子，在footer中經(jīng)常會(huì)有眾多的鏈接，比如服 務(wù)條款，主頁(yè)，版權(quán)聲明頁(yè)等等。footer元素自身已經(jīng)足以應(yīng)付這些情況，雖然nav元素也可以用在這里，但通常我們認(rèn)為是不必要的。
WHATWG HTML spec
關(guān)鍵的詞語(yǔ)是“主要的”導(dǎo)航。當(dāng)然我們可以互相噴上一整天什么叫做“主要的”。而我個(gè)人是這樣定義的：
- 主要的導(dǎo)航
- 站內(nèi)搜索
- 二級(jí)導(dǎo)航（略有爭(zhēng)議）
- 頁(yè)面內(nèi)導(dǎo)航（比如很長(zhǎng)的文章）
既然并沒有絕對(duì)的對(duì)錯(cuò)，所以根據(jù)一個(gè)非正式投票以及我自己的解釋，以下的情況，不管你放不放，我反正不放在<nav>中：
- 分頁(yè)控制
- 社交鏈接（雖然有些社交鏈接也是主要導(dǎo)航，比如“關(guān)于”“收藏”）
- 博客文章的標(biāo)簽
- 博客文章的分類
- 三級(jí)導(dǎo)航
- 過長(zhǎng)的footer
如果你不確定是否要將一系列的鏈接放在nav中，問你自己：“它是主要的導(dǎo)航嗎？”為了幫助你回答這個(gè)問題，考慮以下首要原則：
- 如果使用section和hx也同樣合適，那么不要用nav — Hixie on IRC為了方便訪問，你會(huì)在某個(gè)“快捷跳轉(zhuǎn)”中給這個(gè)nav標(biāo)簽加一個(gè)鏈接嗎？
如果這些問題的答案是“不”，那就跟<nav>鞠個(gè)躬，然后獨(dú)自離開吧。
四、figure元素的常見錯(cuò)誤
figure以及figcaption的正確使用，確實(shí)是難以駕馭。讓我們來(lái)看看一些常見的錯(cuò)誤，
不是所有的圖片都是figure
上文中，我曾告訴各位不要寫不必要的代碼。這個(gè)錯(cuò)誤也是同樣的道理。我看到很多網(wǎng)站把所有的圖片都寫作figure�？丛趫D片的份上請(qǐng)不要給它加額外的標(biāo)簽了。你只是讓你自己蛋疼，而并不能使你的頁(yè)面內(nèi)容更清晰。
規(guī)范中將figure描述為“一些流動(dòng)的內(nèi)容，有時(shí)候會(huì)有包含于自身的標(biāo)題說(shuō)明。一般在文檔流中會(huì)作為獨(dú)立的單元引用。”這正是figure的美妙之處——它可以從主內(nèi)容頁(yè)移動(dòng)到sidebar中，而不影響文檔流。
這些問題也包含在之前提到的 HTML5 element flowchart 中。
如果純粹只是為了呈現(xiàn)的圖，也不在文檔其他地方引用，那就絕對(duì)不是<figure>。其他視情況而定，但一開始可以問自己：“這個(gè)圖片是否必須和上下文有關(guān)？”如果不是，那可能也不是<figure>（也許是個(gè)<aside>）。繼續(xù)：“我可以把它移動(dòng)到附錄中嗎？”如果兩個(gè)問題都符合，則它可能是 <figure>。
Logo并不是figure
進(jìn)一步的說(shuō)，logo也不適用于figure。下面是我常見的一些代碼片段：
<!-- 請(qǐng)不要復(fù)制這段代碼!這是錯(cuò)的 -->
<header>
<h1>
<figure>
<img src="/img/mylogo.png" alt="My company" class="hide" />
</figure>
My company name
</h1>
</header>
<!-- 請(qǐng)不要復(fù)制這段代碼!這也是錯(cuò)的 -->
<header>
<figure>
<img src="/img/mylogo.png" alt="My company" />
</figure>
</header>
沒什么好說(shuō)的了。這就是很普通的錯(cuò)誤。我們可以為logo是否應(yīng)該是H1標(biāo)簽而互相噴到牛都放完回家了，但這里不是我們討論的焦點(diǎn)。真正的問題在于figure元素的濫用。figure只應(yīng)該被引用在文檔中，或者被section元素圍繞。我想你的logo并不太可能以這樣的方式引用吧。很簡(jiǎn)單，請(qǐng)勿使用figure。你只需要這樣做:
<header>
<h1>My company name</h1>
<!-- More stuff in here -->
</header>
Figure也不僅僅只是圖片
另一個(gè)常見的關(guān)于figure的誤解是它只被圖片使用。figure可以是視頻，音頻，圖表，一段引用文字，表格，一段代碼，一段散文，以及任何它們或者其他的組合。不要把figure局限于圖片。web標(biāo)準(zhǔn)的職責(zé)是精確的用標(biāo)簽描述內(nèi)容。
出處：163 UED Team
責(zé)任編輯：moby
上一頁(yè) 避免常見的六種HTML5錯(cuò)誤用法 [2] 下一頁(yè) 避免常見的六種HTML5錯(cuò)誤用法 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 避免常見的六種HTML5錯(cuò)誤用法 [3]
