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

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

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

開發網站

可能大家還記得使用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的一個部分。作為頁面的閱讀者來說，這一點大 家應該看到。

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

<div class="parent">
<h2>Heading</h2>
<p>Some content...</p>
    <div class="child">
        <h2>Another heading</h2>
        <p>Some other content...</p>
    </div>
</div> 

這 里我們我們稍微的修改了一下內容，添加了兩個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> 

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

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

可能很多人認為將<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>等元素。看看下圖有幾個區域：

多選題：

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 class="outer">
    <section class="inner">
        <h1>Section title</h1>
    </section>
</section>

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

[Untitled Section]

• Section title

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

<section>
    <div>
        <h1&gtSection title</h1>
    </div>
</section> 

生成結果如下：

• Section title

可以看到沒有任何警告或者提示！

總結

HTML 并不是一個SDK或者圖形設計師的畫板。它是一個Meta語言，一個幫助你了解特殊信息的語言。有時候我們使用解析器，獲取主體，時間，來源或者流行等內 容。這就是microdata和RDF主要的功能。另外，上下文，層次，相關的重要性和代碼關系都需要被考慮。這就是正確的區域元素使用和語法需要考慮 的。

有些人可能會告訴你不要過于考慮區域，可能由于沒有什么意義。但是使用區域定義很好的提高了HTML的結構，上面我們已經很好的介紹了。

個 人認為，Section不但對于優化document結構來說有好處，而且最終會讓整個DOM趨于合理。而同時對于我們來說需要去適應這種變化，需要我們 自己去優化和改變自己的開發流程和習慣，但是我相信對于web開發的趨勢和方向來說，最終會使得整個流程更加專業和標準化。對于變化應該值得。

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