不管你以前在web頁面布局中如何稱呼它們 - “區域”還是“塊”，我們一直都在布局中將頁面分成可視的不同區域。但真正的問題在于我們并沒有使用任何正確的工具來實現。一般情況下我們使用典型的網格來劃分頁頭，頁面主題，頁尾等等區域來實現所謂的頁面布局。
在過去的很多年以來，我們都使用DIV來幫助我們劃分頁面區域，而為此我們定義了很多class來幫助我們有效定義頁面上的每一個層次，最新的HTML5最終幫助我們解決了這個問題 - 使用section 元素， 很多人都非常喜歡這個新的HTML成員，因為i終于在HTML標準中給予了我們準確的開發建議，Section增強了整個DOM的可讀性，在這篇文章中我 們將介紹這些新的元素，幫助我們了解能夠解決什么問題，提供了什么重要的功能并且對于“語義化Web”做出了什么樣的貢獻!
相關閱讀：HTML5/CSS3系列教程：HTML5基本標簽使用header，nav和footer
開發網站
可能大家還記得使用dreamweaver來開發網站的日子，我們通過拖拽來生成一個典型的頁面，如下：
使用dreamweaver只是為了快速的生成圖形界面而非真正意義上的信息語義清晰，當然很多人都使用dreamweaver，包括我自己。典型的傻瓜式開發的產物。
web標準
當 我們開始熟悉了web標準以及正確開發的相關最佳實踐之后，我們需要做的事情仍舊是視覺設計，典型的“CSS布局”，盡量不使用語義錯誤的table來設 計頁面布局。使用基于div的布局作為web設計其實已經很多年了，不過使用div布局導致document結構的混亂和層次的難于維護是顯而易見的。而 且最惡心的hack問題也一直困擾我們!
Div標簽的問題
每天都會有成千上萬的開發人員使用div來分隔，格式化頁面內容。我們使用div來分隔不同的內容區域，以保證內容的互相獨立。但是事實上div并非用來實現這樣的功能的?？纯慈缦逻@個例子：
在 這個簡單的局部中，包含了一個文字主題和一個邊欄內容。為了讓它對于讀者絕對清晰，我們將sidebar分離于主體。這里我們使用一個粗邊框來封裝這個邊 欄內容。也許你會說，邊欄的標題應該是《h3》，這個我們稍后做解釋。所有的定義使用了一個典型的CSS，如果你把CSS去除，你將看到如下 展示：
如果我去除了CSS，你看到頁面布局變成了響應式風格，這其實就是HTML4 document如何在瀏覽器中實際被生成的樣式。這里我們看到邊欄區域其實是document中的另外一段信息。
為什么會這樣呢?
主 要的原因在于《div》是一個流動內容的元素。不管邊框或者背景是什么樣式，它和主題document并不分離，相反，作為其中的一個部分生 成。當我們移除CSS可以看到，邊欄的“Resource”標題并非是一個獨立的組件，而是document的一個部分。作為頁面的閱讀者來說，這一點大 家應該看到。
為了更好的說明，我們看看如下代碼片段：
Heading
Some content...
Another heading
Some other content...
這里我們我們稍微的修改了一下內容，添加了兩個div到來展示父子關系。 div.child標簽屬于div.parent。我們可以使用CSS來使得兩個元素的關系看起來是這個樣子。但是，要知道div在標準中的描述是“沒什 么特殊含義”。非但不意味著任何語義上的含義，對于web頁面的計算架構來說也沒有任何意義。而且div對于我們來說也不可見。因此我們應該把他們都刪 除，而使用如下4個元素來展示頁面父子關系，如下：
Heading
Some content...
Another heading
Some other content...
作為正確的結構來說，這里是實際構成內容的元素。
標題層次實際并非非常有用
可能很多人認為將《h2》替換成《h3》可能能夠幫助我們解決問題。如果這樣的話，我們可能得到如下：
A header(h2) Another header(h3)
這個方式貌似更加的合理。但是實際上呢?h3的內容是否真的屬于h2?這里很難說清楚。下面我們再看一個例子：
在這個HTML4頁面中，我們使用h1來生成一個頁面內容介紹標題，使用h2作為主內容的標題，使用h3來標示邊欄，并且使用div#footer來生成頁尾內容。但是問題是footer究竟屬于那個一個內容呢?
Footer屬于哪一個標題
下面這個圖非常清晰的展示了document結構問題，我們看到這里footer究竟屬于《h2》的頁尾，還是《h3》的頁尾。
可能有些專家認為，可以將代碼改成如下樣式：
h1(page) h2(main) h3(sidebar) h2(footer)
這個屬于一個hack，但是并非很正確。
劃分區域
了解如何正確的劃分區域，HTML5提供了《section》，《article》，《aside》和《nav》等元素?？纯聪聢D有幾個區域：
多選題：
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的時候，你會看到如下內容：
“the footer element is not sectioning content; it doesn’t introduce a new section.”
這里HTML5的定義上有一些前后矛盾之處，不過大家也不用過于糾纏。
Section是一個新類型的div嗎?
這可能是一個典型的錯誤理解。
Div其實在功能上并沒有任何含義，如果你使用div來創建頁面框架結構將會是一個非常糟糕的選擇。
而Section用來定義一個結構化的區域，看看下面這個例子：
Section title
這里我們使用section來生成一個盒模式。如果我們運行 our outliner，我們得到如下警告：
[Untitled Section]
Section title
這里如果使用div的話，可以有效幫助我們劃分區域：
Section title
生成結果如下：
Section title
可以看到沒有任何警告或者提示!
總結
HTML 并不是一個SDK或者圖形設計師的畫板。它是一個Meta語言，一個幫助你了解特殊信息的語言。有時候我們使用解析器，獲取主體，時間，來源或者流行等內 容。這就是microdata和RDF主要的功能。另外，上下文，層次，相關的重要性和代碼關系都需要被考慮。這就是正確的區域元素使用和語法需要考慮 的。
有些人可能會告訴你不要過于考慮區域，可能由于沒有什么意義。但是使用區域定義很好的提高了HTML的結構，上面我們已經很好的介紹了。
個 人認為，Section不但對于優化document結構來說有好處，而且最終會讓整個DOM趨于合理。而同時對于我們來說需要去適應這種變化，需要我們 自己去優化和改變自己的開發流程和習慣，但是我相信對于web開發的趨勢和方向來說，最終會使得整個流程更加專業和標準化。對于變化應該值得。
via gbtags
申請創業報道，分享創業好點子。點擊此處，共同探討創業新機遇！
