幾乎每天我們都能發(fā)現(xiàn)新的關(guān)于傳授和推廣HTML5的資源和文章,我們也在 HTML5 boilerplate 和 HTML5 Reset (盡管他們已經(jīng)超出了HTML5的范疇)給出了HTML5的模板。我們也有無(wú)數(shù)可以去選擇的涵蓋HTML5及相關(guān)技術(shù)的書(shū)籍。我們有書(shū)架、畫(huà)廊和分析師去幫助我們處理HTML5的弊端。但是主要的不要忘記官方的文檔。
從我的自己的觀點(diǎn)出發(fā)（剔出那些關(guān)于HTML5能做和不能做的爭(zhēng)論）網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)者社區(qū)對(duì)新技術(shù)和語(yǔ)義化是持樂(lè)觀態(tài)度的。
雖然在理論上HTML5擁有能夠改善網(wǎng)頁(yè)的潛質(zhì)，事實(shí)上這么多重要的改變是很難去理解和把握的。對(duì)我個(gè)人而言我一直去慢慢的體會(huì)HTML5的各種新特性的，因此我想去討論一下一些和HTML5相關(guān)的容易讓大家產(chǎn)生迷惑的東西，這也許能幫助大家去更好的理解這門(mén)語(yǔ)言的某些方面，使我們?cè)谑褂眠@些新的特性時(shí)更實(shí)際和合適。
好的方面關(guān)于HTML5的好處已經(jīng)被各種資源討論過(guò)了，包括大量的由 Bruce Lawson, Jeremy Keith, 和 Mark Pilgrim等人的書(shū)籍。通過(guò)使用HTML5我們能讓我們的代碼更有語(yǔ)義，減少冗余和包含的一些新的特性能讓我們?cè)诖a方面化繁為簡(jiǎn)，使一些以前需要大量代碼工作任務(wù)標(biāo)準(zhǔn)化（例如：表單的驗(yàn)證）。
我想這一切都顯著的改善了網(wǎng)頁(yè)標(biāo)記語(yǔ)言。有些改善雖然有些讓人迷惑，看起來(lái)帶有革命性，和革新相比，革命性應(yīng)該是HTML5設(shè)計(jì)的一個(gè)基本原則。讓我們看一下下面的一些事例，如果我們過(guò)去有一些迷惑，我們能發(fā)現(xiàn)這些新的元素是多么的好用和有價(jià)值。
<article>不僅僅是文章在新增加的語(yǔ)義元素中，<section>和<article>標(biāo)簽將會(huì)代替我們?cè)赬HTML中已經(jīng)熟悉的沒(méi)有語(yǔ)義的<div>標(biāo)簽的，但是我們?cè)谑裁磿r(shí)候去使用這些標(biāo)簽的問(wèn)題就出現(xiàn)了。
某些新學(xué)習(xí)這門(mén)語(yǔ)言的人可能會(huì)認(rèn)為一個(gè)<article>標(biāo)簽元素就是去呈現(xiàn)一篇獨(dú)立的文章，例如一篇日志。但這并不是所有的情況。
讓我們一篇博客文章為例，這是說(shuō)明文檔中用到的同一個(gè)例子。 通常，我們可能會(huì)認(rèn)為一篇博客文章的HTML5的標(biāo)簽是這樣的：
</section>就是說(shuō)，我保留了這個(gè)例子中可能用到的一些其他的HTML5標(biāo)簽。在這個(gè)例子中，<article>標(biāo)簽包含了整篇文章，然后”section”在容器的下面包含評(píng)論，每一個(gè)元素都是在他們獨(dú)立的”section”標(biāo)簽中。
這個(gè)文章結(jié)構(gòu)并不是非法的或者錯(cuò)誤的。但是從文檔中描述的<article>中的方法，這個(gè)<article>標(biāo)簽應(yīng)該包含整個(gè)的文章和其他的評(píng)論元素。另外，每一個(gè)評(píng)論本身應(yīng)該在一個(gè)<article>標(biāo)簽中，并且包含在主要的<article>標(biāo)簽中。
下面是從說(shuō)明書(shū)中的截屏，已經(jīng)標(biāo)示出了<article>:
article標(biāo)簽可以被嵌入到其它article標(biāo)簽中，第一次看的時(shí)候可能會(huì)比較迷惑。
因此，一個(gè)<article>標(biāo)簽可能還有其他的<article>標(biāo)簽被嵌入到里面，因此，將我們平常認(rèn)為的單詞”article”更復(fù)雜。Bruce Lawson, Introducing HTML5 的聯(lián)合作者,試圖在下面的一次采訪中解釋這個(gè)疑惑 ：
“不要把<article>放在印刷的范疇，比如報(bào)紙的文章，而是把它認(rèn)為是一個(gè)獨(dú)立的個(gè)體，像“文章的衣服”來(lái)描述，但是它也能包含其它的文章，使這件衣服包容的東西更多。”
— Bruce Lawson
因此，記住將我們能夠?qū)?lt;article>元素放入其他的<article>元素，而不僅僅是文章的內(nèi)容。Bruce 上面的解釋是很好的，這能幫助我們學(xué)習(xí)HTML5新元素如何去使用。
我們使用Section標(biāo)簽還是Article標(biāo)簽？可能最讓我們迷惑的是我們?cè)谑褂肏TML5建立頁(yè)面布局的時(shí)候，如何區(qū)分什么時(shí)候去用<article>或者<section>。當(dāng)我寫(xiě)到這里的時(shí)候，我必須誠(chéng)實(shí)的告訴你我沒(méi)有從HTML5說(shuō)明書(shū)和我已有的關(guān)于HTML5的書(shū)籍中找到他們的區(qū)別，但是慢慢的他們的區(qū)別變得越來(lái)越清晰了。我想 Jeremy Keith在 HTML5 for Web Designers 的第67頁(yè)對(duì)<article>的定義是最好的：
“Article 元素標(biāo)簽是特殊的化的Section.使用它自身包含的相關(guān)元素…首先要問(wèn)你自己你是不是希望你的內(nèi)容通過(guò)RSS或者Atom Feed 信息聚合。如果你的內(nèi)容將在這種環(huán)境下發(fā)布，那么Article 可能是最合適元素標(biāo)簽。”
— Jeremy Keith, HTML5 for Web Designers
Keith的解釋給我莫大的幫助，他同時(shí)繼續(xù)解釋了<article>和<section>間的不同是很小的，這取決于每個(gè)開(kāi)發(fā)者決定如何去使用它們。增加大家迷惑的事實(shí)是，你可以使用多重的article在section中和多種的section在article中。
結(jié)果，可能你想知道為什么我們有他們兩個(gè)。他們間最主要的區(qū)別是：<article>元素是為信息聚合設(shè)計(jì)的,而<section>元素是用來(lái)描述文檔結(jié)構(gòu)和可調(diào)用性。這個(gè)簡(jiǎn)單的描述能幫助我們弄清楚了這兩個(gè)新元素更多一點(diǎn)的區(qū)別。這里我們要記住的是：不管我們最初的疑惑，當(dāng)我們慢慢適應(yīng)這些的時(shí)候，這些改變將會(huì)幫助開(kāi)發(fā)者和內(nèi)容創(chuàng)作者改善他們的工作方法和內(nèi)容分享方法。
Headers 和 Footers (注意他們是復(fù)數(shù)形式!)另外兩個(gè)HTML5引入的元素是<header>和<footer>元素。表面來(lái)看，它們看上去都很直接。這么多年以來(lái)，我們一直使用<div id=”header”>, <div id=”footer”> 或者相近的元素來(lái)定義網(wǎng)站的頭部和頁(yè)腳。這對(duì)DOM操作和定義樣式是很好的方法，因?yàn)槲覀兒苋菀字苯诱业竭@些元素。但是他們確沒(méi)有任何的語(yǔ)意。
“div并沒(méi)有被定義語(yǔ)意，ID屬性也沒(méi)有被定義語(yǔ)意。（用戶的客戶端不允許從ID的屬性中引申含義。）”
— Mark Pilgrim, Dive Into HTML5
HTML5引入<header>和<footer>元素是修正語(yǔ)義問(wèn)題的最好的方法，特別是這種常用的元素。但是這些元素并不是像字面看上去的那么直接。從技術(shù)的層面說(shuō)，如果全世界的所有網(wǎng)站增加一個(gè)<header>和<footer>到他們的頁(yè)面，在HTML5中是完全合法的。但是這個(gè)新的元素并不是僅僅去用做“網(wǎng)站的頭部”和“網(wǎng)站的尾部”。
header標(biāo)簽是用來(lái)設(shè)計(jì)成去標(biāo)示簡(jiǎn)介或者導(dǎo)航的輔助功能，footer 標(biāo)簽設(shè)計(jì)成用來(lái)包含內(nèi)容相關(guān)信息的元素。比如，如果你使用一個(gè)footer元素作為一個(gè)完整頁(yè)面的footer,這種情況下，版權(quán)、政策鏈接和相關(guān)的內(nèi)容就會(huì)很恰當(dāng)?shù)谋话Ｒ粋€(gè)header標(biāo)簽可能包含Logo和導(dǎo)航條。
但是同一個(gè)頁(yè)面可能包含多個(gè)<section>元素。每一個(gè)section中都允許包含它本身的header和/或者 footer標(biāo)簽元素。Keith也把這些元素的用途作了總結(jié)：
“一個(gè)header元素將會(huì)出現(xiàn)在一個(gè)文檔或者一個(gè)section的頂部，但是這不是必須的，這取決于他們本身定義的內(nèi)容…而不是他們的位置。”
“像 header 元素一樣，footer聽(tīng)上去像是在描述它的位置，但像header,那不是唯一的情況。”
— Jeremy Keith, HTML5 for Web Designers
同時(shí)在說(shuō)明文檔中 Keith的說(shuō)明也被作了標(biāo)示:
“<header>元素并不是一個(gè)區(qū)域內(nèi)容；它并不會(huì)表示一個(gè)新的區(qū)塊。”
— The header element in the HTML5 specification
這些解釋能幫助我們?cè)诶斫膺@些標(biāo)簽的概念，讓我們能夠理解這些元素應(yīng)該怎么被使用。事實(shí)上，這些分割頁(yè)面的方法使頁(yè)面是頁(yè)面更輕量化和方便內(nèi)容聚合，對(duì)內(nèi)容創(chuàng)作者和開(kāi)發(fā)者來(lái)說(shuō)，僅僅需要增加語(yǔ)義化的標(biāo)簽。
標(biāo)題的升降的不同方式
在HTML5之前，標(biāo)題標(biāo)簽（從<h1>到<h6>）是很容易理解的。這些年來(lái)，一些大家已經(jīng)適應(yīng)為改善語(yǔ)義、搜索引擎優(yōu)化和可擴(kuò)展的實(shí)踐。通常情況，我們習(xí)慣于在一個(gè)頁(yè)面中只包含一個(gè)<h1>元素，其他的標(biāo)題元素按照順序而沒(méi)有間隔（雖然有時(shí)候它的出現(xiàn)根據(jù)可能需要顛倒順序）。
當(dāng)我們介紹HTML5時(shí)，使用新的結(jié)構(gòu)元素時(shí)，我們需要去重新思考我們查看頁(yè)面結(jié)構(gòu)的角度。
這里有一些事情需要在在我們改變標(biāo)題／文檔結(jié)構(gòu)時(shí)注意：
在每個(gè)獨(dú)立頁(yè)面中，HTML5的最好實(shí)踐建議是給每個(gè)section元素（或者其他的區(qū)塊定義的其它元素）一個(gè)<h1>標(biāo)簽。 雖然我們?cè)试S一個(gè)section元素可以<h2>（或者更低層次的）元素開(kāi)始，但是我們讓然強(qiáng)烈建議以<h1>元素作為一個(gè)<section>開(kāi)始，是Block更方便移動(dòng)。 文檔節(jié)點(diǎn)以由section創(chuàng)建，而不是標(biāo)題（不像以前的HTML版本） <hgroup>元素被用來(lái)將你想將他們作為一個(gè)獨(dú)立的一組相關(guān)的標(biāo)題群組，來(lái)定義或者引申成相對(duì)獨(dú)立的區(qū)塊;<hgroup>并不是每個(gè)系列的標(biāo)題都需要的，只有這些標(biāo)題作為一個(gè)獨(dú)立的單元和外面的內(nèi)容相聯(lián)系時(shí)。 如果想去檢查你的文檔結(jié)構(gòu)是不是正確，你可以使用 HTML5 Outliner。除了上面的觀點(diǎn)外，無(wú)論你的標(biāo)題或者文檔的結(jié)構(gòu)你使用在HTML4或者Xhtml對(duì)HTML5仍然是合法的。
因此，雖然我們構(gòu)建網(wǎng)頁(yè)的老方法不是符合HTML5,我的觀點(diǎn)是關(guān)于最好的實(shí)踐文檔結(jié)構(gòu)正在變的越來(lái)越好。
區(qū)塊或者內(nèi)聯(lián)？?jī)烧叨疾皇牵。ㄈ绾畏诸?hellip;）為了版式和樣式的要求，css開(kāi)發(fā)者已經(jīng)熟悉HTML元素（為了樣式和布局的需要）被定義為兩種元素之一：區(qū)塊元素和內(nèi)聯(lián)元素（雖然你可以將這兩類繼續(xù)分類）。這種理解拓展了我們的一個(gè)元素在制定頁(yè)面的現(xiàn)實(shí)方法，讓我們更容易（一旦你把握了他們見(jiàn)的區(qū)別）去定義樣式和移動(dòng)元素。
HTML5推進(jìn)了這種概念去包含更多的分類，既不是區(qū)塊元素也不是內(nèi)聯(lián)元素。從理論上來(lái)說(shuō)，區(qū)塊和內(nèi)聯(lián)依舊存在，但是他們?cè)诓煌臉?biāo)簽之下?，F(xiàn)在這些不同份額元素分類包括：
群組的內(nèi)容 文字層級(jí)的語(yǔ)義化標(biāo)簽 區(qū)塊內(nèi)容 表單元素 嵌入的內(nèi)容我確實(shí)很喜歡這些改進(jìn)，使標(biāo)簽元素更接近他們的分類，同時(shí)我認(rèn)為開(kāi)發(fā)者也會(huì)很快的適應(yīng)這些變化，但是重要的是我們升級(jí)了洽當(dāng)?shù)男g(shù)語(yǔ)來(lái)確保在這些標(biāo)簽的默認(rèn)展現(xiàn)上減少大家的迷惑。在這篇文章的討論內(nèi)容中，這一點(diǎn)我認(rèn)為是最容易被掌握和接受的。
結(jié)論雖然這些觀點(diǎn)是我自己在研究html5中了解的一些概念的總結(jié)，但是對(duì)任何一個(gè)人來(lái)說(shuō)學(xué)習(xí)這些新標(biāo)記語(yǔ)言特點(diǎn)的方法是拿一本關(guān)于這個(gè)話題的書(shū)。我強(qiáng)烈建議在文中已經(jīng)涉及到的一本，或者你可以在線瀏覽 Mark Pilgrim’s book。
這些新的元素和概念應(yīng)該不會(huì)被誤解。我們可以花一些時(shí)間來(lái)仔細(xì)的研究他們，防止誤解和打開(kāi)疑團(tuán)。通過(guò)這些新的標(biāo)簽元素能幫助我們獲得越來(lái)越多的益處，能幫助開(kāi)發(fā)者和內(nèi)容創(chuàng)建者鋪設(shè)一條有意義的網(wǎng)頁(yè)－－Jeremy Keith認(rèn)為的“沒(méi)有無(wú)意義標(biāo)記的網(wǎng)頁(yè)”。
原文地址:http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/
新聞熱點(diǎn)
疑難解答
圖片精選
