不管你以前在web頁(yè)面布局中如何稱呼它們 - “區(qū)域”還是“塊”，我們一直都在布局中將頁(yè)面分成可視的不同區(qū)域。但真正的問(wèn)題在于我們并沒(méi)有使用任何正確的工具來(lái)實(shí)現(xiàn)。一般情況下我們使用典型的網(wǎng)格來(lái)劃分頁(yè)頭，頁(yè)面主題，頁(yè)尾等等區(qū)域來(lái)實(shí)現(xiàn)所謂的頁(yè)面布局。
在過(guò)去的很多年以來(lái)，我們都使用DIV來(lái)幫助我們劃分頁(yè)面區(qū)域，而為此我們定義了很多class來(lái)幫助我們有效定義頁(yè)面上的每一個(gè)層次，最新的HTML5最終幫助我們解決了這個(gè)問(wèn)題 - 使用section 元素， 很多人都非常喜歡這個(gè)新的HTML成員，因?yàn)閕終于在HTML標(biāo)準(zhǔn)中給予了我們準(zhǔn)確的開(kāi)發(fā)建議，Section增強(qiáng)了整個(gè)DOM的可讀性，在這篇文章中我 們將介紹這些新的元素，幫助我們了解能夠解決什么問(wèn)題，提供了什么重要的功能并且對(duì)于“語(yǔ)義化Web”做出了什么樣的貢獻(xiàn)！
開(kāi)發(fā)網(wǎng)站
可能大家還記得使用dreamweaver來(lái)開(kāi)發(fā)網(wǎng)站的日子，我們通過(guò)拖拽來(lái)生成一個(gè)典型的頁(yè)面，如下：
使用dreamweaver只是為了快速的生成圖形界面而非真正意義上的信息語(yǔ)義清晰，當(dāng)然很多人都使用dreamweaver，包括我自己。典型的傻瓜式開(kāi)發(fā)的產(chǎn)物。
web標(biāo)準(zhǔn)
當(dāng)我們開(kāi)始熟悉了web標(biāo)準(zhǔn)以及正確開(kāi)發(fā)的相關(guān)最佳實(shí)踐之后，我們需要做的事情仍舊是視覺(jué)設(shè)計(jì)，典型的“CSS布局”，盡量不使用語(yǔ)義錯(cuò)誤的table來(lái)設(shè) 計(jì)頁(yè)面布局。使用基于div的布局作為web設(shè)計(jì)其實(shí)已經(jīng)很多年了，不過(guò)使用div布局導(dǎo)致document結(jié)構(gòu)的混亂和層次的難于維護(hù)是顯而易見(jiàn)的。而 且最惡心的hack問(wèn)題也一直困擾我們！
Div標(biāo)簽的問(wèn)題
每天都會(huì)有成千上萬(wàn)的開(kāi)發(fā)人員使用div來(lái)分隔，格式化頁(yè)面內(nèi)容。我們使用div來(lái)分隔不同的內(nèi)容區(qū)域，以保證內(nèi)容的互相獨(dú)立。但是事實(shí)上div并非用來(lái)實(shí)現(xiàn)這樣的功能的。看看如下這個(gè)例子：
在這個(gè)簡(jiǎn)單的局部中，包含了一個(gè)文字主題和一個(gè)邊欄內(nèi)容。為了讓它對(duì)于讀者絕對(duì)清晰，我們將sidebar分離于主體。這里我們使用一個(gè)粗邊框來(lái)封裝這個(gè)邊 欄內(nèi)容。也許你會(huì)說(shuō)，邊欄的標(biāo)題應(yīng)該是<h3>，這個(gè)我們稍后做解釋。所有的定義使用了一個(gè)典型的CSS，如果你把CSS去除，你將看到如下 展示：
如果我去除了CSS，你看到頁(yè)面布局變成了響應(yīng)式風(fēng)格，這其實(shí)就是HTML4 document如何在瀏覽器中實(shí)際被生成的樣式。這里我們看到邊欄區(qū)域其實(shí)是document中的另外一段信息。
為什么會(huì)這樣呢？
主要的原因在于<div>是一個(gè)流動(dòng)內(nèi)容的元素。不管邊框或者背景是什么樣式，它和主題document并不分離，相反，作為其中的一個(gè)部分生 成。當(dāng)我們移除CSS可以看到，邊欄的“Resource”標(biāo)題并非是一個(gè)獨(dú)立的組件，而是document的一個(gè)部分。作為頁(yè)面的閱讀者來(lái)說(shuō)，這一點(diǎn)大 家應(yīng)該看到。
為了更好的說(shuō)明，我們看看如下代碼片段：
<div class="parent">
<h2>Heading</h2>
<p>Some content...</p>
<div class="child">
<h2>Another heading</h2>
<p>Some other content...</p>
</div>
</div>
這里我們我們稍微的修改了一下內(nèi)容，添加了兩個(gè)div到來(lái)展示父子關(guān)系。 div.child標(biāo)簽屬于div.parent。我們可以使用CSS來(lái)使得兩個(gè)元素的關(guān)系看起來(lái)是這個(gè)樣子。但是，要知道div在標(biāo)準(zhǔn)中的描述是“沒(méi)什 么特殊含義”。非但不意味著任何語(yǔ)義上的含義，對(duì)于web頁(yè)面的計(jì)算架構(gòu)來(lái)說(shuō)也沒(méi)有任何意義。而且div對(duì)于我們來(lái)說(shuō)也不可見(jiàn)。因此我們應(yīng)該把他們都刪 除，而使用如下4個(gè)元素來(lái)展示頁(yè)面父子關(guān)系，如下：
<h2>Heading</h2>
<p>Some content...</p>
<h2>Another heading</h2>
<p>Some other content...</p>
作為正確的結(jié)構(gòu)來(lái)說(shuō)，這里是實(shí)際構(gòu)成內(nèi)容的元素。
標(biāo)題層次實(shí)際并非非常有用
可能很多人認(rèn)為將<h2>替換成<h3>可能能夠幫助我們解決問(wèn)題。如果這樣的話，我們可能得到如下：
- A header(h2)
- Another header(h3)
這個(gè)方式貌似更加的合理。但是實(shí)際上呢？h3的內(nèi)容是否真的屬于h2？這里很難說(shuō)清楚。下面我們?cè)倏匆粋€(gè)例子：
在這個(gè)HTML4頁(yè)面中，我們使用h1來(lái)生成一個(gè)頁(yè)面內(nèi)容介紹標(biāo)題，使用h2作為主內(nèi)容的標(biāo)題，使用h3來(lái)標(biāo)示邊欄，并且使用div#footer來(lái)生成頁(yè)尾內(nèi)容。但是問(wèn)題是footer究竟屬于那個(gè)一個(gè)內(nèi)容呢？
Footer屬于哪一個(gè)標(biāo)題
下面這個(gè)圖非常清晰的展示了document結(jié)構(gòu)問(wèn)題，我們看到這里footer究竟屬于<h2>的頁(yè)尾，還是<h3>的頁(yè)尾。
可能有些專家認(rèn)為，可以將代碼改成如下樣式：
- h1(page)
- h2(main)
- h3(sidebar)
- h2(footer)
這個(gè)屬于一個(gè)hack，但是并非很正確。
劃分區(qū)域
了解如何正確的劃分區(qū)域，HTML5提供了<section>，<article>，<aside>和<nav>等元素。看看下圖有幾個(gè)區(qū)域：
多選題：
A. 1 B. 2 C. 3 D. 4
你的答案是什么？ 正確的應(yīng)該是 （B）。
也許你會(huì)不太理解，因?yàn)樵贖TML5的標(biāo)準(zhǔn)中擁有有如下具體的定義：
4.4 Sections
- 4.4.1 body
- 4.4.2 nav
- 4.4.3 article
- 4.4.4 aside
- 4.4.5 h1, h2, h3, h4, h5 and h6
- 4.4.6 hgroup
- 4.4.7 header
- 4.4.8 footer
- 4.4.9 address
但是如果你看看 4.4.8 footer的時(shí)候，你會(huì)看到如下內(nèi)容：
“the footer element is not sectioning content; it doesn’t introduce a new section.”
這里HTML5的定義上有一些前后矛盾之處，不過(guò)大家也不用過(guò)于糾纏。
Section是一個(gè)新類型的div嗎？
這可能是一個(gè)典型的錯(cuò)誤理解。
Div其實(shí)在功能上并沒(méi)有任何含義，如果你使用div來(lái)創(chuàng)建頁(yè)面框架結(jié)構(gòu)將會(huì)是一個(gè)非常糟糕的選擇。
而Section用來(lái)定義一個(gè)結(jié)構(gòu)化的區(qū)域，看看下面這個(gè)例子：
<section class="outer">
<section class="inner">
<h1>Section title</h1>
</section>
</section>
這里我們使用section來(lái)生成一個(gè)盒模式。如果我們運(yùn)行 our outliner，我們得到如下警告：
[Untitled Section]
- Section title
這里如果使用div的話，可以有效幫助我們劃分區(qū)域：
<section>
<div>
<h1>Section title</h1>
</div>
</section>
生成結(jié)果如下：
- Section title
可以看到?jīng)]有任何警告或者提示！
總結(jié)
HTML 并不是一個(gè)SDK或者圖形設(shè)計(jì)師的畫板。它是一個(gè)Meta語(yǔ)言，一個(gè)幫助你了解特殊信息的語(yǔ)言。有時(shí)候我們使用解析器，獲取主體，時(shí)間，來(lái)源或者流行等內(nèi) 容。這就是microdata和RDF主要的功能。另外，上下文，層次，相關(guān)的重要性和代碼關(guān)系都需要被考慮。這就是正確的區(qū)域元素使用和語(yǔ)法需要考慮 的。
有些人可能會(huì)告訴你不要過(guò)于考慮區(qū)域，可能由于沒(méi)有什么意義。但是使用區(qū)域定義很好的提高了HTML的結(jié)構(gòu)，上面我們已經(jīng)很好的介紹了。
個(gè)人認(rèn)為，Section不但對(duì)于優(yōu)化document結(jié)構(gòu)來(lái)說(shuō)有好處，而且最終會(huì)讓整個(gè)DOM趨于合理。而同時(shí)對(duì)于我們來(lái)說(shuō)需要去適應(yīng)這種變化，需要我們 自己去優(yōu)化和改變自己的開(kāi)發(fā)流程和習(xí)慣，但是我相信對(duì)于web開(kāi)發(fā)的趨勢(shì)和方向來(lái)說(shuō)，最終會(huì)使得整個(gè)流程更加專業(yè)和標(biāo)準(zhǔn)化。對(duì)于變化應(yīng)該值得。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。