HTML5元素中區段內容(Sectioning Content)選用流程

什麼是區段內容？

學習 HTML5 的過程裡，最簡單也最常使用應該是語意標籤(Semantic Tag)，它擴充了 HTML 4 的不足，也讓 HTML 4 頁面裡充滿 div 元素現象得以改善。我們一方面要面對的是人，一方面對的的搜尋引擎。如果你不在乎搜尋引擎，那使用 HTML 4 或 HTML5 對你一點影響也沒有。反正你的網站使用 table 或 div 排版，對於只看內容的人而言，沒有差別。但又有很怪異的事，一堆結構不佳的網站(通常是用 table 排版，現在還是有很多網站還在用 table 在做 layout。 >.<")，又花錢在買網路廣告，買網路排名，買 SEO 服務！怪怪。

區段內容是 HTML5 裡提出比 div 更合適拿來設計排版的元素，例如，nav 元素就是拿來設計【巡覽列】，使用 <nav> 元素和 <div id="nav"> / <div id="sidebar"> 元素，很明顯 nav 在語意上有先天優勢，當搜尋引擎一來進，nav 元素內是巡覽內容，article 元素內是獨立的內容，section 元素是一區塊…等，不過當你實際使用時，常會有這裡應該用 article 還是 section 呢？也就是說，常有在一個地方好像可以有多個 HTML5 區段內容可選擇時，我要如何選擇呢？

區段內容的選擇

在 html5Doctor 網站裡提供了一份很好的參考資料：

圖片來源：html5Doctor

下載 PDF：HTML5 Element Flowchart

這是一份很好的區段內容元素選擇流程圖。

區段內容元素選擇流程

以下就流程圖內紅色選擇條件進行解說：

1. 是否為主要巡覽(navigation)區塊？Yes，請使用 <nav> 元素。
2. 它自己本身有意義嗎？(例如，在feed reader裡)Yes，請使用 <article> 元素。
3. 需要它來了解當前的內容嗎？No，請使用 <aside> 元素。
4. 你可以將它移至一個附錄？Yes，請使用 <figure> 元素。
5. 是否合乎邏輯的去增加一個標題？Yes，請使用 <section> 元素。
6. 它是有擁有任何的語意？
   1. Yes，選用合適的語意標籤，例如，<p>、<address>、<blackquote>、<pre> …等。
   2. No，可使用 <div> 元素。例如，單純用來進行 CSS 的區塊。

html5Doctor 的 Element Index

另外，在 html5Doctor 有份 Element Index，是我想推薦給你的參考資料，它有完整的現行在 HTML5 規格中完整的元素索引列表，每個元素列出 w3.org 裡的簡明定義及簡單範例，如果你在元素下有看到【OUR PROGNOSIS】，我是建議必讀，通常它是對此元素的前因後果有非常完整的討論，可增加不少相關知識。

單純就 HTML5 元素而言，我覺得 html5Doctor 整理的很好，在使用 HTML5 元素時，必須了解更新一些元素在 HTML4 至 HTML5 的差異，舉例來說，i 元素，在 HTML 4 就只是很簡單的讓文字斜體，但在 HTML5 之中定義：

Represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

就算看不懂 w3.org 裡 i 元素的定義，但那長長一串的說明，應該就能了解很多 HTML 4 的元素在 HTML5 中被重新定義過。你的網站如果越正確使用 HTML5 的元素加上好的內容，在 SEO、網站排名就能很自然取得高分，你的立足點就是會比別人高一些。