不管你以前在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)！

相關(guān)閱讀：HTML5/CSS3系列教程：HTML5基本標(biāo)簽使用header，nav和footer

開(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é)