語意化的 HTML ( Semantic HTML )

「The correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance.」

Semantic 直譯「語意」，我個人比較喜歡稱他為「有意義且結構化的」

Semantic HTML，直譯就是「語意化的 HTML」(也有人稱做: semantically-correct HTML ， 語意正確的 HTML )

指的是我們使用 HTML 建立架構的 Tag Name 是要有意義的，並適當的應用在其中

這樣說比較難懂，我們直接看圖片

在 HTML 5 以前，都是使用( 圖二 ) 的方式去做網頁的排版

開發人員使用大量的div，在去賦予其 ID 或是 Class 的屬性，創造更多豐富且有意涵的標記。

「HTML 5 introduces a number of new elements. Some of these are what I've termed “structural”— section, nav, aside, header, and footer.」
── Semantics in HTML 5 by John Allsopp

所以，在 HTML 5 之後，是使用 ( 圖一 ) 的方式去做網頁的排版

使用有意義的 Tag Name ，將網頁結構化，這種方式就是 Semantic HTML

使用 Semantic HTML 的優點

• 搜尋引擎優化 ( SEO，Search Engine Optimisation) ─ 透過自然排序增加曝光度
• 下載速度快 ─ HTML檔案會比較小
• 好維護 ─ 開發人員維護較方便
• 無障礙網頁 ─ 提供身障人士用聲音來聽網頁

Semantic HTML 也是 SEO 的基礎，出發點是讓人能夠清楚理解，輕鬆的看懂網站以及搜尋引擎 ( 、機器或程式 ) 能夠簡單去處理

其實這一點就跟網站優化的目的相同：

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

重點懶人包 :

1. 使用有意義的 Tag Name ，將網頁結構化
2. 讓人及搜尋引擎能夠輕鬆的看懂你的網站
3. 優點 : SEO、下載速度快、好維護、無障礙網頁
4. 正確使用 HTML 來強化網頁上內容的含義，而不僅僅是定義其外觀

參考與引用資料:

[Day 2] HTML5 & Semantic HTML

[SEO專欄] 想做好網站優化？先學會Semantic HTML吧

介紹 Semantic HTL

What is Semantic HTML?

Semantics in HTML 5