HTML5/CSS3系列教程：HTML5 區(qū)域(Sectioning)的重要性

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

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

相關閱讀：HTML5/CSS3系列教程：HTML5基本標簽使用header，nav和footer

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

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

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

web標準

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

Div標簽的問題

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

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

如果我去除了CSS，你看到頁面布局變成了響應式風格，這其實就是HTML4 document如何在瀏覽器中實際被生成的樣式。這里我們看到邊欄區(qū)域其實是document中的另外一段信息。

為什么會這樣呢？

主 要的原因在于《div》是一個流動內(nèi)容的元素。不管邊框或者背景是什么樣式，它和主題document并不分離，相反，作為其中的一個部分生 成。當我們移除CSS可以看到，邊欄的“Resource”標題并非是一個獨立的組件，而是document的一個部分。作為頁面的閱讀者來說，這一點大 家應該看到。

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

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

<h2>Heading</h2>

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

<h2>Another heading</h2>

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

作為正確的結構來說，這里是實際構成內(nèi)容的元素。

標題層次實際并非非常有用

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

A header（h2）

Another header（h3）

這個方式貌似更加的合理。但是實際上呢？h3的內(nèi)容是否真的屬于h2？這里很難說清楚。下面我們再看一個例子：

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

Footer屬于哪一個標題

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

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

h1（page）

h2（main）

h3（sidebar）

h2（footer）

這個屬于一個hack，但是并非很正確。

劃分區(qū)域

了解如何正確的劃分區(qū)域，HTML5提供了《section》，《article》，《aside》和《nav》等元素?？纯聪聢D有幾個區(qū)域：

多選題：

A. 1 B. 2 C. 3 D. 4

你的答案是什么？ 正確的應該是 （B）。

也許你會不太理解，因為在HTML5的標準中擁有有如下具體的定義：

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的時候，你會看到如下內(nèi)容：

“the footer element is not sectioning content; it doesn’t introduce a new section.”

這里HTML5的定義上有一些前后矛盾之處，不過大家也不用過于糾纏。

Section是一個新類型的div嗎？

這可能是一個典型的錯誤理解。

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

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

<section class=“outer”>

<section class=“inner”>

<h1>Section title</h1>

</section>

</section>

這里我們使用section來生成一個盒模式。如果我們運行 our outliner，我們得到如下警告：

［Untitled Section］

Section title

這里如果使用div的話，可以有效幫助我們劃分區(qū)域：

<section>

<div>

<h1>Section title</h1>

</div>

</section>

生成結果如下：

Section title

可以看到?jīng)]有任何警告或者提示！

總結