介紹 Semantic HTML

在網路上看到一篇 Semantic HTML 的介紹,嘗試翻譯了一下,有任何錯誤或需要修改的地方請多多指教,謝謝。

#Semantic:語意
現在任何人想建立他們自己的HTML頁面應該要以“使自己的標記語義是正確”為目標。
這篇文章將會解釋什麼是 Semantic HTML 與 semantically-correct HTML,以及它是如何有利於Web的發展。

Semantic一詞在中文直譯為「語意」,不過這裡的「語意」非語言中的「語意」,而是讓你所撰寫的電子資訊,可以讓人類能夠清楚理解,同時也適合被機器或程式處理之。其實這一點就跟網站優化的目的相同:

  • 可以讓人類能夠清楚理解 - SMO
  • 適合被機器或程式處理 - SEO

#什麼是 Semantic HTML?
Semantic 的主要研究意義在於:如何有意義的去建立並應用這些標記。
“為什麼 X 要叫做 X?” 這就是 semantics 的問題。
HTML 是我們用來撰寫網頁的標記語言,它是能夠被標準的網頁瀏覽器所了解,以及多項其他類型的”使用者代理”,包含了行動裝置、搜尋引擎蜘蛛及聽覺瀏覽器等。

HTML包含了兩種類型的東西:

  • 標記(Tags)
  • 文字內容(Text content)

有一些標記可以擁有他們自己的內容(像是圖片、Flash動畫或是metadata),但大部分的HTML標記都是應用在內容架構上。
語意化HTML(Semantic HTML) 或 語意正確的HTML(semantically-correct HTML)
指的是我們選用建立架構的標記是要有意義的,並適當的應用在其中。

因為搜索引擎不是人,她並不懂你網站中文字的意思是什麼,她會的只是整理跟歸納而已。所以你的HTML結構中,就必須先幫搜索引擎劃重點。
所以,舉個例子好了,如果你想要你的 HTML 是語意正確(semantically-correct)的話…

  • Headings:也就是 h1 ~ h6,標籤數字越小層級越高,這就有如書本中或是報紙的大中小標題一般。被標示為 h1(大標題)通常是很醒目的目標,一定是具代表性的意義的文字,於是搜索引擎就會特別注意 h1標籤內的字。
  • 一個段落標記<p></p>的使用應該要用於標示一個段落(這是一個架構的概念),而不能用在建立一個在網頁上的空間。
    絕對不要用一堆<p>來建立網頁上的空白位置
  • 標記<b></b>(粗體)與<i></i>(斜體)永遠不要用它,因為這些標記是用在格式上的應用,在內容的架構上是沒有意義的。取而代之,使用<strong></strong><em></em>(強調意味),兩者在瀏覽器預設的情況下,文字格式會變成粗體與斜體,但使用<strong></strong><em></em>同時也增加有意義的架構內容。
  • Alt:這是附屬在img標籤裡面的屬性,因為搜索引擎看到的都是程式碼,alt的功用就是幫圖附上註解,讓搜索引擎知道,這張圖是在說什麼。

就W3C的準則而言:

  • I: Renders as italic text style.
  • B: Renders as bold text style. [w3c.org]
  • EM:Indicates emphasis.
  • STRONG:Indicates stronger emphasis. [w3c.org]

所以在操作SEO的時候,網站或是每篇文章的重要關鍵字,一定是要被包在h1標籤中的。

#總是將樣式表從內容獨立出來
HTML 標記不應該被套上圖樣 - 這是CSS的工作(層疊樣式表 Cascading Style Sheet)
請參考 http://webdesignfromscratch.com/web-design-tutorials/來了解更多關於HTML、CSS 及 JavaScript 如何結合在一個網頁上。
(實際演練的時候也會將所有的JavaScript功能(Functions)及事件處理(Event Handlers)從 HTML 標記中移除)

以上是基礎中的基礎,要做好SEO事實上並沒那麼困難,出發點就是讓人及搜尋引擎能夠輕鬆的看懂你的網站,就是好的網站優化。

#為什麼有正確語意的HTML會比較好?
撰寫語意化HTML帶來的相當大的好處:

  • 易於使用 (Ease of use)
  • 易接近、無障礙 (Accessibility)
  • 搜尋引擎優化 (Search Engine Optimisation)
  • 可再利用 (Repurposing)

#易於使用
首先,語意化HTML是乾淨的HTML。它更容易閱讀和編輯標記,而且沒有額外的標記和內嵌樣式。
當要和其他人協力進行的時候,乾淨的標記也節省了時間和金錢。
例如:開發人員要在一個內容管理系統或任何其他web應用來實現你的頁面樣板,乾淨的HTML就可以很快的完成樣式的套用。
而且還有一個好處就是你的HTML檔案會比較小,可以加速讀取的速度。

#易接近、無障礙
搜尋引擎蜘蛛與爬蟲,像是Google機器人,代表著另一種使用者代理,他們也會讀取網頁內容,嘗試去辨別其中的涵義。
當爬蟲發現一個網頁,它會在索引資料庫存取對於這個網頁是關於什麼的評估,以提供與使用者相匹配的搜尋查詢時使用。

最大的問題是:搜尋引擎要如何匹配搜尋的條件,對已知頁面來建立一個優先級列表?
當然,每家的作法都不太一樣,不過對於搜尋引擎優化其中一個關鍵點,就是使用普通的方式。如果你是一個搜尋引擎,你會怎麼做呢?如果你透過搜尋引擎的工作遇到一些問題,那麼有幾項很快就會明白,往往容易表達的前綴就是”所有的事物都是平等的”。

比方說,你有兩個網頁,這兩個網頁都是完全相同的文字內容(10KB),其中一頁有多餘5KB的HTML標記,整齊地註釋在內容的語意意涵。第二頁有多餘30KB的標記,包含了行內樣式、大量的巢狀<div>標記及裝飾圖像。
現在,更多的圖樣密集的頁面或許對人類訪客來說看起來比較好,但如果每頁都包含了搜尋條件 “bluebottle” 五次,你會(把自己當成是搜尋引擎)如何判別哪一個才是最接近某人要的”bluebottle”搜尋條件呢?

顯然的,是第一個,除了頁面比較輕巧,還有以下幾點可能的原因:

  • 1.輕盈頁面的關鍵字密度是最好的。它在15KB的標記中帶有搜尋條件5次,而第二個頁面40KB的標記中也帶有5次條件。無論加入的標記是要給搜尋引擎看的(搜尋引擎也許無法告知),它看起來似乎沒有關於”bluebottle”的條件。

  • 2.每個出現的搜尋條件很可能在文件的一開始中,輕量化的頁面比40KB大的頁面提升更多。所有的事物都是平等的,越早發現文件的搜尋條件,越有可能是關於這個搜尋條件的文件,或這個條件是在這個文件內容中最突出的。

  • 3.假設第一個文件是明確的含有語意化的標記,比起在一個更多圖樣的頁面(這頁面可能使用圖片當連結,或許也沒有適當的加入alt屬性),那麼第一個頁面很可能會是搜尋條件中被放在更高價值的標記(例如標頭(heading)或連結(link))。

#再利用
當你的標記(有意義的內容)從你的樣式(為不同的媒體提供的樣式表)中分離,明顯地內容可以更容易被使用者代理了解。這意味著不只是使用者代理已經知道你,但是有些你不完全知道(像是自動抓取建立自定義的RSS新聞feeds在某個主題上、或圖片或具體的影片搜尋引擎)以及其他尚未被發明的!

最近幾年我們可以看到很多混和內容為主要特點的網站與應用。這會在網站原創者沒有知識(knowledge)下發生,但大多數的情況下,這樣的自由內容在網站間移動,適應各種媒體,這對原創者來說是有益的。

通常在這樣的情況下,在新的混合頁面上被不同格式的方式獲取網頁的內容,更重要的是它從標記本身移除所有的任何樣式內容。
(注意 行內樣式、直接套用在HTML標記上、透過分離出來的樣式表來覆蓋任何其他樣式,如此一來他們就可以把程式碼剝離)

顯然地,這使內容從任何來源更容易獲取與再使用,而且能容易套用到任何介質(medium),當它不包含任何寫死的(hard-coded)樣式,而且當它包含語意標記可幫助電腦程序了解其內容的架構和意涵。

來源:
http://webdesignfromscratch.com/html-css/semantic-html/
http://blog.seo-tw.org/2010/04/seo-semantic-html.html
http://www.slideshare.net/josephj/semantic-html-basic-presentation