在所有設(shè)計(jì)原理中，這一條恐怕是最響亮的了——求真務(wù)實(shí)。不知道大家有沒有在公司里開會(huì)時(shí)聽到過這種口號(hào)：“開拓進(jìn)取，求真務(wù)實(shí)。”實(shí)際上，除了作 為企業(yè)的口號(hào)，它還是一條非常重要的設(shè)計(jì)原理，因?yàn)榍笳鎰?wù)實(shí)對(duì)于HTML的含義是：在解決那些令人頭痛的問題之前，先看看人們?yōu)閼?yīng)對(duì)這些問題都想出了哪些 辦法。集中精力去理解這些“民間的”解決方案才是當(dāng)務(wù)之急。

HTML5網(wǎng)站設(shè)計(jì)中新的語義元素就是遵循求真務(wù)實(shí)原理的反映。新增的元素不算多，談不上無限的擴(kuò)展性，但卻不失為一件好事。盡管數(shù)量屈指可數(shù)，但意義卻非 同一般。這些新元素涉及頭部（header）、腳部（footer）、分區(qū)（section）、文章（article）……，相信大家都不會(huì)覺得陌生。我 的意思是說，即便你不使用HTML5，也應(yīng)該熟悉這些稱呼，這些都是你曾經(jīng)使用過的類名，比如class=”header”/“head”/“heading”，或class=”footer”/“foot”。當(dāng)然，也可能是ID，id=”header”，id=”footer”。這些不都是我們已經(jīng)司空見慣了的嘛。

好，舉個(gè)例子吧，假設(shè)你今天寫了下面這個(gè)文檔。

view sourceprint?

這里有一個(gè)div使用了id=”header”，另一個(gè)div使用了id=”navigation”，……。怎么樣，都輕車熟路了吧？在HTML5中，這些元素都可以換掉。說起新增的語義元素，它們價(jià)值的一方面可以這樣來體現(xiàn)：“嘿，看啊，這樣多好，用HTML5新增的元素可以把這些div都替換掉?！?/p>

view sourceprint?

當(dāng)然了，你可以這樣做。在文檔級(jí)別上使用這些元素沒有問題。但是，假如新增這些元素的目的僅僅是為了取代原來的div，那就真有點(diǎn)多此一舉了。

雖然在這個(gè)文檔中，我們用這些新元素來替換的是ID，但在我個(gè)人看來，將它們作為類的替代品更有價(jià)值。為什么這么說呢？因?yàn)檫@些元素在一個(gè)頁面中不 止可以使用一次，而是可以使用多次。沒錯(cuò)，你可以為文檔添加一個(gè)頭部（header），再添加一個(gè)腳部（footer）；但文檔中的每個(gè)分區(qū) （section）照樣也都可以有一個(gè)頭部和一個(gè)腳部。而每個(gè)分區(qū)里還可以嵌套另一個(gè)分區(qū)，被嵌套的分區(qū)仍然可以有自己的頭部和腳部，是這樣吧？

這四個(gè)新元素：section、article、aside和nav，之所以說它們強(qiáng)大，原因在于它們代表了一種新的內(nèi)容模型，一種HTML中前所 未有的內(nèi)容模型——給內(nèi)容分區(qū)。迄今為止，我們一直都在用div來組織頁面中的內(nèi)容，但與其他類似的元素一樣，div本身并沒有語義。但section、 article、aside和nav實(shí)際上是在明確地告訴你——這一塊就像文檔中的另一個(gè)文檔一樣。位于這些元素中的任何內(nèi)容，都可以擁有自己的概要、標(biāo) 題，自己的腳部。

其中最為通用的section，可以說是與內(nèi)容最相關(guān)的一個(gè)。而article則是一種特殊的section。Aside呢，是一種特殊的section。最后，Nav也是一種特殊的section。

好，即便是現(xiàn)在，你照樣可以使用div和類來描述頁面中不同的部分，就像下面這樣：

view sourceprint?

其中包含可能是有關(guān)內(nèi)容作者的元數(shù)據(jù)，而下面會(huì)給出一些鏈接，差不多就這樣。在HTML5中，我完全可以說這塊內(nèi)容就是一個(gè)文檔，通過對(duì)內(nèi)容分區(qū)， 使用section或article或aside，我可以說“這一塊完全是可以獨(dú)立存在的。”因此，我當(dāng)然可以使用header和footer。

view sourceprint?

請(qǐng)注意，即便是footer，也不一定非要出現(xiàn)在下面，不是嗎？這幾個(gè)元素，header、footer、aside、nav，最重要的是它們的語 義；跟位置沒有關(guān)系。一想到footer這個(gè)詞，我們總會(huì)不由自主地想，“噢，應(yīng)該放在下面?！蓖瑯樱覀儼補(bǔ)side想象成一個(gè)側(cè)邊欄?？墒?，如果你看 一看規(guī)范，就會(huì)發(fā)現(xiàn)這些元素只跟內(nèi)容有關(guān)。因此，放在footer中的內(nèi)容也可以是署名，文章作者之類的，它只是你使用的一個(gè)元素。這個(gè)元素并沒有說“必 須把我放在文檔或者分區(qū)的下面?！?/p>

這里，請(qǐng)注意，最重要的還不是我用幾個(gè)新元素替換了原來的div加類，而是我把原來的H2換成了H1——震撼吧，我看到有人發(fā)抖了。我碰到過不少職 業(yè)的Web開發(fā)人員，多年來他們一直認(rèn)為規(guī)范里說一個(gè)文檔中只能有一個(gè)H1。還有一些自詡為萬能的SEO秘訣同樣說要這樣。很多SEO的技巧其實(shí)是很教條 的。所謂教條，意思就是不相信數(shù)據(jù)。過去，這種教條表現(xiàn)為“不行，頁面中包含兩個(gè)以上的H1，你就會(huì)死掉的。”在HTML5中，只要你建立一個(gè)新的內(nèi)容 塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必?fù)?dān)心這個(gè)塊里的標(biāo)題在整個(gè)頁面中應(yīng)該排在什 么級(jí)別；H2、H3，都沒有問題。

這個(gè)變化太厲害了。想一想吧，這個(gè)變化對(duì)內(nèi)容管理是革命性的。因?yàn)楝F(xiàn)在，你可以把每個(gè)內(nèi)容分區(qū)想象一個(gè)獨(dú)立的、能夠從頁面中拿出來的部分。此時(shí)，根 據(jù)上下文不同，這個(gè)獨(dú)立部分中的H1，在整個(gè)頁面中沒準(zhǔn)會(huì)扮演H2或H3的角色——取決于它在文檔中出現(xiàn)的位置。面對(duì)這個(gè)突如其來的變化，也許有人的腦子 會(huì)暫時(shí)轉(zhuǎn)不過彎來。不要緊，但我可以告訴你，我認(rèn)為這才是HTML5中這些新語義標(biāo)記的真正價(jià)值所在。換句話說，我們現(xiàn)在有了獨(dú)立的元素了，這些元素中的 標(biāo)題級(jí)別可以重新定義。

我的文檔中可能會(huì)包含一個(gè)分區(qū)，這個(gè)分區(qū)中可能會(huì)嵌套另一個(gè)分區(qū)，或者一篇文章，然后文章再嵌套分區(qū)，分區(qū)再嵌套文章、嵌套分區(qū)，文章再嵌套文章。 而且每個(gè)分區(qū)和文章都可以擁有自己的H1到H6。從這個(gè)意義上講，H元素真可謂“子子孫孫，無窮匱也”了。但是，在你在編寫內(nèi)容或者內(nèi)容管理系統(tǒng)的時(shí)候， 它們又都是獨(dú)立的，完全獨(dú)立的內(nèi)容塊。這才是真正的價(jià)值所在。

實(shí)際上，這個(gè)點(diǎn)子并不HTML5工作組拍腦門想出來的，也不是W3C最近才提出來的。下面這幾句話摘自蒂姆·伯納斯-李1991年的一封郵件，郵件 是發(fā)給丹·康納利（Dan Connolly）的。他在郵件中解釋了對(duì)HTML的理解，他說：“你知道……知道我的想法，我認(rèn)為H1、H2這樣單調(diào)地排下去不好，我希望它成為一種可 以嵌套的元素，或者說一個(gè)通用的H元素，我們可以在其中嵌套不同的層次?！钡髞?，我們沒有看到通用的H元素，而是一直在使用H1和H2——那是因?yàn)槲覀?一直在支持已有的內(nèi)容。20年后的今天，這個(gè)理想終于實(shí)現(xiàn)了。

-------北京網(wǎng)站建設(shè)公司  北京傳誠信------