網頁

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 網站裡提供了一份很好的參考資料:

HTML5 Element Flowchart 圖片來源: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、網站排名就能很自然取得高分,你的立足點就是會比別人高一些。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。