|
c. solve real problems
解決現(xiàn)實的問題
這看起來有點像再說廢話, 誰不是為了解決問題在做事情的呢?
而這條設計原理才是真正要解決今天的人們所面臨的現(xiàn)實問題、令人頭疼的問題。
好吧, 繼續(xù)看代碼: <h2>Heading text</h2>
<p>Paragraph text.</p>
現(xiàn)在我們需要給這兩個文本都加上一個鏈接, 那我們的做法會是什么? 給h2和p分別加上一個a標簽？ 或許，也有聰明的同學會用a標簽來整個包住h2和p，就像： <a href="somewhere">
<h2>Heading text</h2>
<p>Paragraph text.</p>
</a>
這樣寫有錯嗎？沒錯吧？只不過是種不太好的習慣, 并且通不過嚴格的校驗.
但是這樣的應用場景肯定存在的, 那為什么不能這樣寫呢?
這種寫法其實早就已經(jīng)存在于瀏覽器中了，因為早就有人這樣寫了，當然以前這樣寫是不合乎規(guī)范的。所以，說HTML5解決現(xiàn)實的問題，其本質(zhì)還是“你都這樣寫了很多年了吧？現(xiàn)在我們把標準改了，允許你這樣寫了�！�
d. pave the cowpaths
求真務實
Cowpath： 把一群牛放在地里，然后看牛喜歡怎么走，然后根據(jù)牛群踩過的痕跡來鋪一條給牛走的路。
很有趣的比喻吧, 說的就是把一些既然存在的東西變得更加標準一些. 接上地氣的標準才是能夠被執(zhí)行的標準.
舉個栗子:
WHATWG對抽樣對大量網(wǎng)站進行了分析, 得出了這樣的一個結(jié)論:
id=”header”, id=”footer”, id=”content”, id=”navigation”, id=”sidebar” 這樣的命名方式非常常見, 那好吧, 那我就給你們一些這樣的標簽!
<section>,<article>,<aside>,<nav>,<header>,<footer>,<details>,<figure>
看代碼: <body>
<div id="header"></div>
<div id="navigation"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
變! <body>
<header></header>
<nav></nav>
<div id="main"></div>
<aside></aside>
<footer></footer>
</body>
怎么樣? 像模像樣了吧?
再看: <div class="item">
<h2></h2>
<div class="meta"></div>
<div class="content"></div>
<div class="link"></div>
</div>
再變! <section class="item">
<header><h2></h2></header>
<footer class="meta"></ footer >
<div class="content"></div>
<nav class="link"></nav>
</section>
雖然在這個文檔中，我們用這些新元素來替換的是id，但在我個人看來，將它們作為類的替代品更有價值。為什么這么說呢？因為這些元素在一個頁面中不止可以使用一次，而是可以使用多次。沒錯，你可以為文檔添加一個頭部（header），再添加一個腳部（footer）；但文檔中的每個分區(qū)（section）照樣也都可以有一個頭部和一個腳部。而每個分區(qū)里還可以嵌套另一個分區(qū)，被嵌套的分區(qū)仍然可以有自己的頭部和腳部，是這樣吧？
這四個新元素：section、article、aside和nav，之所以說它們強大，原因在于它們代表了一種新的內(nèi)容模型，一種HTML中前所未有的內(nèi)容模型——給內(nèi)容分區(qū)。迄今為止，我們一直都在用div來組織頁面中的內(nèi)容，但與其他類似的元素一樣，div本身并沒有語義。但section、article、aside和nav實際上是在明確地告訴你——這一塊就像文檔中的另一個文檔一樣。位于這些元素中的任何內(nèi)容，都可以擁有自己的概要、標題，自己的腳部。
其中最為通用的section，可以說是與內(nèi)容最相關的一個。而article則是一種特殊的section。aside呢，是一種特殊的section。最后，nav也是一種特殊的section。
最重要的是它們的語義；跟位置沒有關系。
這里，請注意，最重要的還不是我用幾個新元素替換了原來的div加類，而是我把原來的H2換成了H1——震撼吧，我看到有人發(fā)抖了。我碰到過不少職業(yè)的Web開發(fā)人員，多年來他們一直認為規(guī)范里說一個文檔中只能有一個H1。還有一些自詡為萬能的SEO秘訣同樣說要這樣。很多SEO的技巧其實是很教條的。所謂教條，意思就是不相信數(shù)據(jù)。過去，這種教條表現(xiàn)為“不行，頁面中包含兩個以上的H1，你就會死掉的�！痹贖TML5中，只要你建立一個新的內(nèi)容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必擔心這個塊里的標題在整個頁面中應該排在什么級別；H2、H3，都沒有問題。
這個變化太厲害了。想一想吧，這個變化對內(nèi)容管理是革命性的。因為現(xiàn)在，你可以把每個內(nèi)容分區(qū)想象一個獨立的、能夠從頁面中拿出來的部分。此時，根據(jù)上下文不同，這個獨立部分中的H1，在整個頁面中沒準會扮演H2或H3的角色——取決于它在文檔中出現(xiàn)的位置。面對這個突如其來的變化，也許有人的腦子會暫時轉(zhuǎn)不過彎來。不要緊，但我可以告訴你，我認為這才是HTML5中這些新語義標記的真正價值所在。換句話說，我們現(xiàn)在有了獨立的元素了，這些元素中的標題級別可以重新定義。
出處：Alibaba.com UED
責任編輯：bluehearts
上一頁 HTML5設計原則 [4] 下一頁 HTML5設計原則 [6]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 HTML5設計原則 [5]
