直觀的看,上面的例子是錯誤的:<section> 并不是一個容器.<section>元素是有語意的區(qū)段,幫助構(gòu)建文檔大綱。它應(yīng)該包含標(biāo)題。如果你要尋找一個可以包含頁面的元素(不論是 HTML 或者 XHTML ),通常的做法是直接對<body>標(biāo)簽定義樣式就像Kroc Camen描述的那樣子,如果你還需要額外的元素來定義樣式,使用<div>,就像Dr Mike 闡述的那樣, div并沒有滅亡,如果這里沒有其它更合適的,div可能是你最合適的選擇。
記住這點,這里我們重新修正了上面的例子,通過使用兩個新角色。(你是否需要額外的<div>取決于你的設(shè)計。)
</body>如果你還是無法確定哪一個元素更適合使用,我建議你去查看HTML5 sectioning content element flowchart來讓你繼續(xù)前行。
只在需要的時候使用 <hgroup>和<header>標(biāo)簽使用標(biāo)記的時候?qū)懭肓艘恍┎⒉恍枰默F(xiàn)象這是不合理的。不幸的是,經(jīng)常發(fā)現(xiàn)大家在并不需要的地方使用<header>和<hgroup>標(biāo)簽。你可以跟進(jìn)我們關(guān)于<header>和<hgroup>的最新進(jìn)展,下面是我的簡單歸納:
<header>元素通常是通常作為一組解釋或者導(dǎo)航輔助工具,通常包含section的標(biāo)題. <hgroup>元素會將當(dāng)有副標(biāo)題/子標(biāo)題,各類標(biāo)識文字時,對<h1>到<h6>標(biāo)題進(jìn)行群組,將其作為section的標(biāo)題.過度使用的<header>你肯定知道,在一個文檔中,可以使用多次<header>標(biāo)簽,下面就是一種很受大家歡迎的模式:
</hgroup> 不要將所有的鏈接列表都放到<nav>標(biāo)簽在HTML5新增的30個元素中(在我們寫這篇文章的時候),我們在構(gòu)建更具語義/結(jié)構(gòu)化的標(biāo)簽的時候,我們的選擇變得太豐富.也就是說我們對現(xiàn)在給我們提供的這些超級有語義的標(biāo)簽,我們可能會濫用.<nav>就是一個很悲劇的例子.在規(guī)范中的描述是這樣的:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
WHATWG HTML spec
這里面的關(guān)鍵詞是”重要”導(dǎo)航.我們可能會對”重要”有不同的定義,但是我的理解是:
主要導(dǎo)航 網(wǎng)站搜索 二級導(dǎo)航(這個能是有爭議的) 頁面內(nèi)鏈接(比如一篇很長的文章)雖然并沒有對錯之分,但根據(jù)我的理解和一個民意投票讓我覺得在下面這些情形下,我不會使用<nav>標(biāo)簽:
翻頁 社交類的鏈接(雖然有些社交類的鏈接也是主要的鏈接,比如關(guān)于我About me和品味Flavours ) 博客文章的標(biāo)簽 博客文章的分類列表 第三級導(dǎo)航 大頁腳如果你不能確定是否使用<nav>,那就先對你問一下下面的幾個問題:“者是否是一個主要鏈接?”,你可以根據(jù)下面的幾個因素來回答你剛才的問題:
如果用<section>和標(biāo)題標(biāo)簽?zāi)軌蚪鉀Q你的問題,那就不要去使用<nav>–Hixie on IRC 你是不是為了增加可訪問性而增加的一個快捷跳轉(zhuǎn)鏈接呢?如果上面的回答都是“不”,那可能就不適合使用<nav>.
<figure>元素的錯誤<figure>和經(jīng)常與它合伙作案的<figcaption>,是很難掌握的標(biāo)簽,下面是經(jīng)常看到的一些小錯誤。
并不是所有的圖片都是figure(注:比較難理解阿,image=圖片,figure=圖形)之前,我曾經(jīng)說過不要寫那些不需要的標(biāo)簽。這個錯誤也是相同的。我經(jīng)常看到一個網(wǎng)站上的每張圖片都有<figure>標(biāo)簽。這些額外增加的標(biāo)簽并不會給你帶來任何的益處,并且還增加了你自己的工作強(qiáng)度和讓自己的內(nèi)容變得更難理解。
在規(guī)范中關(guān)于<figure>的解釋如下:“某些流內(nèi)容,可以有標(biāo)題,自我包含并且通常作為一個單元獨立于內(nèi)文檔流之外。”在那里有完美的表述,就是它可以被從主內(nèi)容中移除–比如放到邊攔,而對文檔流沒有影響。
如果僅僅是一張表現(xiàn)類的圖片而且和文檔中其他的內(nèi)容沒有關(guān)系的話,那就不需要使用<figure>.”這張圖片需要對上下文的內(nèi)容作出解釋嗎?”,如果答案是”否”,那就可能不是<figure>(可能是<aside>),”我能把它移到附錄里面嗎?”,如果這兩個問題的答案都是”是”,那就可能是<figure>.
將上面的延伸開來,對你的logo也是這樣。下面是兩組我找到的有規(guī)律的代碼片斷:
</header> figure只能用在標(biāo)簽上的誤解另一個對<figure>的誤解就是我們通常認(rèn)為它只能用在圖片上面。事實上并不是這樣子的,它可以被用在 <video><audio>, 一個圖標(biāo) (比如<SVG>, ), 一個引用, 一個表格, 一段代碼, 一段散文, 或者任何和這些相關(guān)的組合. 不要把你的<figure>標(biāo)簽僅僅局限在圖片上。我們網(wǎng)頁制作師的任務(wù)就是用標(biāo)簽更準(zhǔn)確的描述內(nèi)容。
這里有一篇更深入講解 <figure>的文章I wrote about <figure>,很值得閱讀的。
這可能是我們最常見的一些問題,它們并不是真正的錯誤,但我覺得我們的最好實踐還是盡量避免這種模式。
在HTML5中,我們并不需要給<script>和<script>增加 type 屬性,如果這些從CMS默認(rèn)添加的內(nèi)容中移出是很痛苦的事情,那當(dāng)你手工編碼的時候還寫入它們或者你能完全的控制你的模板時候你完全可以刪掉它們。因為所有的瀏覽器都會將<script>解析成Javascript和<script>標(biāo)簽是CSS,你不再需要那個type屬性了:
新聞熱點
疑難解答