|
四、figure元素的常見錯誤
figure以及figcaption的正確使用，確實是難以駕馭。讓我們來看看一些常見的錯誤，
不是所有的圖片都是figure
上文中，我曾告訴各位不要寫不必要的代碼。這個錯誤也是同樣的道理。我看到很多網(wǎng)站把所有的圖片都寫作figure�？丛趫D片的份上請不要給它加額外的標(biāo)簽了。你只是讓你自己蛋疼，而并不能使你的頁面內(nèi)容更清晰。
規(guī)范中將figure描述為“一些流動的內(nèi)容，有時候會有包含于自身的標(biāo)題說明。一般在文檔流中會作為獨立的單元引用�！边@正是figure的美妙之處——它可以從主內(nèi)容頁移動到sidebar中，而不影響文檔流。
這些問題也包含在之前提到的 HTML5 element flowchart 中。
如果純粹只是為了呈現(xiàn)的圖，也不在文檔其他地方引用，那就絕對不是<figure>。其他視情況而定，但一開始可以問自己：“這個圖片是否必須和上下文有關(guān)？”如果不是，那可能也不是<figure>（也許是個<aside>）。繼續(xù)：“我可以把它移動到附錄中嗎？”如果兩個問題都符合，則它可能是 <figure>。
Logo并不是figure
進(jìn)一步的說，logo也不適用于figure。下面是我常見的一些代碼片段：
<!-- 請不要復(fù)制這段代碼!這是錯的 -->
<header>
<h1>
<figure>
<img src="/img/mylogo.png" alt="My company" class="hide" />
</figure>
My company name
</h1>
</header>
<!-- 請不要復(fù)制這段代碼!這也是錯的 -->
<header>
<figure>
<img src="/img/mylogo.png" alt="My company" />
</figure>
</header>
沒什么好說的了。這就是很普通的錯誤。我們可以為logo是否應(yīng)該是H1標(biāo)簽而互相噴到牛都放完回家了，但這里不是我們討論的焦點。真正的問題在于 figure元素的濫用。figure只應(yīng)該被引用在文檔中，或者被section元素圍繞。我想你的logo并不太可能以這樣的方式引用吧。很簡單，請 勿使用figure。你只需要這樣做:
<header>
<h1>My company name</h1>
<!-- More stuff in here -->
</header>
Figure也不僅僅只是圖片
另一個常見的關(guān)于figure的誤解是它只被圖片使用。figure可以是視頻，音頻，圖表，一段引用文字，表格，一段代碼，一段散文，以及任何它們或者其他的組合。不要把figure局限于圖片。web標(biāo)準(zhǔn)的職責(zé)是精確的用標(biāo)簽描述內(nèi)容。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 六種常見的HTML5寫法誤用 [3] 下一頁 六種常見的HTML5寫法誤用 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 六種常見的HTML5寫法誤用 [4]
