不管你以前在web頁面布局中如何稱呼它們 - “區(qū)域”還是“塊”，我們一直都在布局中將頁面分成可視的不同區(qū)域。但真正的問題在于我們并沒有使用任何正確的工具來實(shí)現(xiàn)。一般情況下我們使用典型的網(wǎng)格來劃分頁頭，頁面主題，頁尾等等區(qū)域來實(shí)現(xiàn)所謂的頁面布局。

在過去的很多年以來，我們都使用DIV來幫助我們劃分頁面區(qū)域，而為此我們定義了很多class來幫助我們有效定義頁面上的每一個(gè)層次，最新的HTML5最終幫助我們解決了這個(gè)問題 - 使用section 元素， 很多人都非常喜歡這個(gè)新的HTML成員，因?yàn)閕終于在HTML標(biāo)準(zhǔn)中給予了我們準(zhǔn)確的開發(fā)建議，Section增強(qiáng)了整個(gè)DOM的可讀性，在這篇文章中我 們將介紹這些新的元素，幫助我們了解能夠解決什么問題，提供了什么重要的功能并且對(duì)于“語義化Web”做出了什么樣的貢獻(xiàn)！

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

開發(fā)網(wǎng)站

可能大家還記得使用dreamweaver來開發(fā)網(wǎng)站的日子，我們通過拖拽來生成一個(gè)典型的頁面，如下：

使用dreamweaver只是為了快速的生成圖形界面而非真正意義上的信息語義清晰，當(dāng)然很多人都使用dreamweaver，包括我自己。典型的傻瓜式開發(fā)的產(chǎn)物。

web標(biāo)準(zhǔn)

當(dāng) 我們開始熟悉了web標(biāo)準(zhǔn)以及正確開發(fā)的相關(guān)最佳實(shí)踐之后，我們需要做的事情仍舊是視覺設(shè)計(jì)，典型的“CSS布局”，盡量不使用語義錯(cuò)誤的table來設(shè) 計(jì)頁面布局。使用基于div的布局作為web設(shè)計(jì)其實(shí)已經(jīng)很多年了，不過使用div布局導(dǎo)致document結(jié)構(gòu)的混亂和層次的難于維護(hù)是顯而易見的。而 且最惡心的hack問題也一直困擾我們！

Div標(biāo)簽的問題

每天都會(huì)有成千上萬的開發(fā)人員使用div來分隔，格式化頁面內(nèi)容。我們使用div來分隔不同的內(nèi)容區(qū)域，以保證內(nèi)容的互相獨(dú)立。但是事實(shí)上div并非用來實(shí)現(xiàn)這樣的功能的?？纯慈缦逻@個(gè)例子：

在 這個(gè)簡單的局部中，包含了一個(gè)文字主題和一個(gè)邊欄內(nèi)容。為了讓它對(duì)于讀者絕對(duì)清晰，我們將sidebar分離于主體。這里我們使用一個(gè)粗邊框來封裝這個(gè)邊 欄內(nèi)容。也許你會(huì)說，邊欄的標(biāo)題應(yīng)該是《h3》，這個(gè)我們稍后做解釋。所有的定義使用了一個(gè)典型的CSS，如果你把CSS去除，你將看到如下 展示：

如果我去除了CSS，你看到頁面布局變成了響應(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è)部分。作為頁面的閱讀者來說，這一點(diǎn)大 家應(yīng)該看到。

為了更好的說明，我們看看如下代碼片段：

<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到來展示父子關(guān)系。 div.child標(biāo)簽屬于div.parent。我們可以使用CSS來使得兩個(gè)元素的關(guān)系看起來是這個(gè)樣子。但是，要知道div在標(biāo)準(zhǔn)中的描述是“沒什 么特殊含義”。非但不意味著任何語義上的含義，對(duì)于web頁面的計(jì)算架構(gòu)來說也沒有任何意義。而且div對(duì)于我們來說也不可見。因此我們應(yīng)該把他們都刪 除，而使用如下4個(gè)元素來展示頁面父子關(guān)系，如下：

<h2>Heading</h2>

<p>Some content...</p>

<h2>Another heading</h2>

<p>Some other content...</p>

作為正確的結(jié)構(gòu)來說，這里是實(shí)際構(gòu)成內(nèi)容的元素。

標(biāo)題層次實(shí)際并非非常有用

可能很多人認(rèn)為將《h2》替換成《h3》可能能夠幫助我們解決問題。如果這樣的話，我們可能得到如下：

A header（h2）

Another header（h3）

這個(gè)方式貌似更加的合理。但是實(shí)際上呢？h3的內(nèi)容是否真的屬于h2？這里很難說清楚。下面我們?cè)倏匆粋€(gè)例子：

在這個(gè)HTML4頁面中，我們使用h1來生成一個(gè)頁面內(nèi)容介紹標(biāo)題，使用h2作為主內(nèi)容的標(biāo)題，使用h3來標(biāo)示邊欄，并且使用div#footer來生成頁尾內(nèi)容。但是問題是footer究竟屬于那個(gè)一個(gè)內(nèi)容呢？

Footer屬于哪一個(gè)標(biāo)題

下面這個(gè)圖非常清晰的展示了document結(jié)構(gòu)問題，我們看到這里footer究竟屬于《h2》的頁尾，還是《h3》的頁尾。

可能有些專家認(rèn)為，可以將代碼改成如下樣式：

h1（page）

h2（main）

h3（sidebar）

h2（footer）

這個(gè)屬于一個(gè)hack，但是并非很正確。

劃分區(qū)域

了解如何正確的劃分區(qū)域，HTML5提供了《section》，《article》，《aside》和《nav》等元素?？纯聪聢D有幾個(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的定義上有一些前后矛盾之處，不過大家也不用過于糾纏。

Section是一個(gè)新類型的div嗎？

這可能是一個(gè)典型的錯(cuò)誤理解。

Div其實(shí)在功能上并沒有任何含義，如果你使用div來創(chuàng)建頁面框架結(jié)構(gòu)將會(huì)是一個(gè)非常糟糕的選擇。

而Section用來定義一個(gè)結(jié)構(gòu)化的區(qū)域，看看下面這個(gè)例子：

<section class=“outer”>

<section class=“inner”>

<h1>Section title</h1>

</section>

</section>

這里我們使用section來生成一個(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é)