在網路上看到一篇 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/](Free 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/](Introduction to Semantic HTML)
http://blog.seo-tw.org/2010/04/seo-semantic-html.html
[http://www.slideshare.net/josephj/semantic-html-basic-presentation](Semantic HTML Basic)