紀錄工作經驗、相關知識,解決技術相關問題。

HTML

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 製作,製作完的代碼難以直觀的識別。

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

(圖一) HTML4 tag 製作範例

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

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

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

(圖二) 使用HTML5語意標籤製作範例

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

HTML 5 語意標籤整理表

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

結論

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

2 留言

  1. 匿名訪客

    div吧

發表迴響