|
求真務(wù)實(shí)
在所有設(shè)計(jì)原理中，這一條恐怕是最響亮的了——求真務(wù)實(shí)。不知道大家有沒(méi)有在公司里開(kāi)會(huì)時(shí)聽(tīng)到過(guò)這種口號(hào)：“開(kāi)拓進(jìn)取，求真務(wù)實(shí)�！睂�(shí)際上，除了作為企業(yè)的口號(hào)，它還是一條非常重要的設(shè)計(jì)原理，因?yàn)榍笳鎰?wù)實(shí)對(duì)于HTML的含義是：在解決那些令人頭痛的問(wèn)題之前，先看看人們?yōu)閼?yīng)對(duì)這些問(wèn)題都想出了哪些辦法。集中精力去理解這些“民間的”解決方案才是當(dāng)務(wù)之急。
HTML5中新的語(yǔ)義元素就是遵循求真務(wù)實(shí)原理的反映。新增的元素不算多，談不上無(wú)限的擴(kuò)展性，但卻不失為一件好事。盡管數(shù)量屈指可數(shù)，但意義卻非同一般。這些新元素涉及頭部（header）、腳部（footer）、分區(qū)（section）、文章（article）……，相信大家都不會(huì)覺(jué)得陌生。我的意思是說(shuō)，即便你不使用HTML5，也應(yīng)該熟悉這些稱(chēng)呼，這些都是你曾經(jīng)使用過(guò)的類(lèi)名，比如class=”header”/“head”/“heading”，或class=”footer”/“foot”。當(dāng)然，也可能是ID，id=”header”，id=”footer”。這些不都是我們已經(jīng)司空見(jiàn)慣了的嘛。
好，舉個(gè)例子吧，假設(shè)你今天寫(xiě)了下面這個(gè)文檔。
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
這里有一個(gè)div使用了id=”header”，另一個(gè)div使用了id=”navigation”，……。怎么樣，都輕車(chē)熟路了吧？在HTML5中，這些元素都可以換掉。說(shuō)起新增的語(yǔ)義元素，它們價(jià)值的一方面可以這樣來(lái)體現(xiàn)：“嘿，看啊，這樣多好，用HTML5新增的元素可以把這些div都替換掉�！�
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
當(dāng)然了，你可以這樣做。在文檔級(jí)別上使用這些元素沒(méi)有問(wèn)題。但是，假如新增這些元素的目的僅僅是為了取代原來(lái)的div，那就真有點(diǎn)多此一舉了。
雖然在這個(gè)文檔中，我們用這些新元素來(lái)替換的是ID，但在我個(gè)人看來(lái)，將它們作為類(lèi)的替代品更有價(jià)值。為什么這么說(shuō)呢？因?yàn)檫@些元素在一個(gè)頁(yè)面中不止可以使用一次，而是可以使用多次。沒(méi)錯(cuò)，你可以為文檔添加一個(gè)頭部（header），再添加一個(gè)腳部（footer）；但文檔中的每個(gè)分區(qū)（section）照樣也都可以有一個(gè)頭部和一個(gè)腳部。而每個(gè)分區(qū)里還可以嵌套另一個(gè)分區(qū)，被嵌套的分區(qū)仍然可以有自己的頭部和腳部，是這樣吧？
這四個(gè)新元素：section、article、aside和nav，之所以說(shuō)它們強(qiáng)大，原因在于它們代表了一種新的內(nèi)容模型，一種HTML中前所未有的內(nèi)容模型——給內(nèi)容分區(qū)。迄今為止，我們一直都在用div來(lái)組織頁(yè)面中的內(nèi)容，但與其他類(lèi)似的元素一樣，div本身并沒(méi)有語(yǔ)義。但section、article、aside和nav實(shí)際上是在明確地告訴你——這一塊就像文檔中的另一個(gè)文檔一樣。位于這些元素中的任何內(nèi)容，都可以擁有自己的概要、標(biāo)題，自己的腳部。
其中最為通用的section，可以說(shuō)是與內(nèi)容最相關(guān)的一個(gè)。而article則是一種特殊的section。Aside呢，是一種特殊的section。最后，Nav也是一種特殊的section。
好，即便是現(xiàn)在，你照樣可以使用div和類(lèi)來(lái)描述頁(yè)面中不同的部分，就像下面這樣：
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">
...
</div>
<div class="links">...</div>
</div>
其中包含可能是有關(guān)內(nèi)容作者的元數(shù)據(jù)，而下面會(huì)給出一些鏈接，差不多就這樣。在HTML5中，我完全可以說(shuō)這塊內(nèi)容就是一個(gè)文檔，通過(guò)對(duì)內(nèi)容分區(qū)，使用section或article或aside，我可以說(shuō)“這一塊完全是可以獨(dú)立存在的。”因此，我當(dāng)然可以使用header和footer。
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<nav class="links">...</nav>
</section>
請(qǐng)注意，即便是footer，也不一定非要出現(xiàn)在下面，不是嗎？這幾個(gè)元素，header、footer、aside、nav，最重要的是它們的語(yǔ)義；跟位置沒(méi)有關(guān)系。一想到footer這個(gè)詞，我們總會(huì)不由自主地想，“噢，應(yīng)該放在下面�！蓖瑯�，我們把a(bǔ)side想象成一個(gè)側(cè)邊欄�？墒�，如果你看一看規(guī)范，就會(huì)發(fā)現(xiàn)這些元素只跟內(nèi)容有關(guān)。因此，放在footer中的內(nèi)容也可以是署名，文章作者之類(lèi)的，它只是你使用的一個(gè)元素。這個(gè)元素并沒(méi)有說(shuō)“必須把我放在文檔或者分區(qū)的下面�！�
這里，請(qǐng)注意，最重要的還不是我用幾個(gè)新元素替換了原來(lái)的div加類(lèi)，而是我把原來(lái)的H2換成了H1——震撼吧，我看到有人發(fā)抖了。我碰到過(guò)不少職業(yè)的Web開(kāi)發(fā)人員，多年來(lái)他們一直認(rèn)為規(guī)范里說(shuō)一個(gè)文檔中只能有一個(gè)H1。還有一些自詡為萬(wàn)能的SEO秘訣同樣說(shuō)要這樣。很多SEO的技巧其實(shí)是很教條的。所謂教條，意思就是不相信數(shù)據(jù)。過(guò)去，這種教條表現(xiàn)為“不行，頁(yè)面中包含兩個(gè)以上的H1，你就會(huì)死掉的�！痹贖TML5中，只要你建立一個(gè)新的內(nèi)容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必?fù)?dān)心這個(gè)塊里的標(biāo)題在整個(gè)頁(yè)面中應(yīng)該排在什么級(jí)別；H2、H3，都沒(méi)有問(wèn)題。
這個(gè)變化太厲害了。想一想吧，這個(gè)變化對(duì)內(nèi)容管理是革命性的。因?yàn)楝F(xiàn)在，你可以把每個(gè)內(nèi)容分區(qū)想象一個(gè)獨(dú)立的、能夠從頁(yè)面中拿出來(lái)的部分。此時(shí)，根據(jù)上下文不同，這個(gè)獨(dú)立部分中的H1，在整個(gè)頁(yè)面中沒(méi)準(zhǔn)會(huì)扮演H2或H3的角色——取決于它在文檔中出現(xiàn)的位置。面對(duì)這個(gè)突如其來(lái)的變化，也許有人的腦子會(huì)暫時(shí)轉(zhuǎn)不過(guò)彎來(lái)。不要緊，但我可以告訴你，我認(rèn)為這才是HTML5中這些新語(yǔ)義標(biāo)記的真正價(jià)值所在。換句話(huà)說(shuō)，我們現(xiàn)在有了獨(dú)立的元素了，這些元素中的標(biāo)題級(jí)別可以重新定義。
我的文檔中可能會(huì)包含一個(gè)分區(qū)，這個(gè)分區(qū)中可能會(huì)嵌套另一個(gè)分區(qū)，或者一篇文章，然后文章再嵌套分區(qū)，分區(qū)再嵌套文章、嵌套分區(qū)，文章再嵌套文章。而且每個(gè)分區(qū)和文章都可以擁有自己的H1到H6。從這個(gè)意義上講，H元素真可謂“子子孫孫，無(wú)窮匱也”了。但是，在你在編寫(xiě)內(nèi)容或者內(nèi)容管理系統(tǒng)的時(shí)候，它們又都是獨(dú)立的，完全獨(dú)立的內(nèi)容塊。這才是真正的價(jià)值所在。
實(shí)際上，這個(gè)點(diǎn)子并不HTML5工作組拍腦門(mén)想出來(lái)的，也不是W3C最近才提出來(lái)的。下面這幾句話(huà)摘自蒂姆·伯納斯-李1991年的一封郵件，郵件是發(fā)給丹·康納利（Dan Connolly）的。他在郵件中解釋了對(duì)HTML的理解，他說(shuō)：“你知道……知道我的想法，我認(rèn)為H1、H2這樣單調(diào)地排下去不好，我希望它成為一種可以嵌套的元素，或者說(shuō)一個(gè)通用的H元素，我們可以在其中嵌套不同的層次�！钡髞�(lái)，我們沒(méi)有看到通用的H元素，而是一直在使用H1和H2——那是因?yàn)槲覀円恢痹谥С忠延械膬?nèi)容。20年后的今天，這個(gè)理想終于實(shí)現(xiàn)了。
出處：
責(zé)任編輯：bluehearts
上一頁(yè) HTML5設(shè)計(jì)原理 [7] 下一頁(yè) HTML5設(shè)計(jì)原理 [9]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 8 頁(yè) HTML5設(shè)計(jì)原理 [8]
