HTML5 語意標籤 – 新手請告別 div 海吧

什麼是 HTML 5 語意標籤?

語意標籤，英文全名為 Semantic Elements，中文又俗稱【語意化標籤、HTML 5 語意標籤】。

而在 HTML 5 中，進一步對 HTML tag 的使用進行了更明確的定義，這便是語意標籤。

HTML 5 語意標籤的優點

HTML 5 語意標籤的定義與使用，明確的告知了瀏覽器與開發人員該區塊的用途，有助於：

1. 搜尋引擎的抓取，進而對 SEO 加分
2. 開發代碼的識別與維護

HTML5 語意標籤用法 – 如何使用

我們都知道，網頁是由許多的 HTML tag 組合而成進行，HTML 4 以前，相關 HTML tag 大多只有樣式的差異，並沒有去對相關 tag 進行明確定義，這導致了在製作上，大多使用 div 製作，製作完的代碼難以直觀的識別。

我們用一個簡易的網頁來做為例子。

圖一我們可以看到，網頁在沒有使用語意標籤時，整個網頁幾乎都可以採用dev製作，但除了不直觀外，也不利於搜尋引擎判別。

試著想想，如果你是搜尋引擎，你希望查詢網頁中的主要內容，該上哪去找呢?

我們將圖一中的div與 span，改為 HTML 5 語意標籤並進行對照，如下：
(PS : 點圖可以放大看)

圖二，我們可以看到，改為語意標籤後，可以非常直觀的知道，該區塊的用途與內容是什麼類型，使用起來非常簡單。

HTML 5 語意標籤整理表

HTML Tag	說明
header	頁首，或是網頁 or 區塊的上方板塊，通常包含該頁標題。
nav	選單、導覽，常用於 menu。
main	主要內容區塊。
aside	側欄、附加內容，多用於非主要資訊 or 廣告。
article	文章內容。
section	自訂的區塊，例如數篇摘要組成的空間。
mark	強調內容區塊，像是句子中希望使用螢光筆的強調的部分。
time	顯示時間日期，如更新日期、建立日期、截止日期…等等。
details	定義可查看 or 隱藏的額外細節。
footer	頁尾，網頁最底部區塊。

結論

每當看到這樣的網頁，從頭到尾全都用 dev 寫到底，就好像坐上時光機，回到 HTML 2 網頁被俗稱 table 海的年代。