HTML 語意化

視覺標籤 vs 語意標籤

區分 1. b 與 strong 2. i 與 em 3. small 的語意與用途。

總結：為什麼要用語意標籤？

1. SEO 友善：搜尋引擎能看懂重點。
2. 無障礙（Accessibility）：螢幕閱讀器會用不同語氣讀出 strong 和 em。
3. 代碼維護：明確傳達內容的意義，而不僅是長相。

Semantic HTML5 Accessibility

粗體顯示：<b> vs <strong>

  • <b>：純粹視覺上的粗體（Bring Attention）。
  • <strong>：代表內容具有重要性、嚴重性（Importance）。

斜體顯示：<i> vs <em>

  • <i>：視覺上的斜體，常用於學名、外來語、專有名詞。
  • <em>：代表語氣上的強調（Stress Emphasis），會改變句子重心。

附屬細則：<small>

  • <small> (Small print)：在 HTML5 中代表附屬資訊。
  • 常用於：版權聲明、法律條款、補充說明。

範例：© 2026 努比全端筆記。保留所有權利。

重點高亮：<mark>

  • <mark>：代表為了引用或醒目而標記出的重點（如同螢光筆）。
  • 用途：搜尋結果中的關鍵字高亮、強調段落中的特定字詞。

範例：SECHSKIES 於 1997年4月15日 正式出道。

修訂標記：<del> vs <ins>

  • <del> (Deleted)：代表已刪除的內容，通常帶有刪除線。
  • <ins> (Inserted)：代表新插入的內容，通常帶有下劃線。
  • 常用於：文件改版、合約修訂、電商特價顯示。

電商範例：原價 $6,000，特價 $3,000！

修訂範例：會議時間從 14:00 改為 15:00。

下標文字：<sub>

  • <sub> (Subscript)：定義下標內容。
  • 用途：化學分子式、數學下標索引。

化學式範例：水的分子式是 H2O。

數學範例：數列項次 a1, a2, ..., an。

上標文字：<sup>

  • <sup> (Superscript)：定義上標內容。
  • 用途：數學次方（平方/立方）、單位標記、文件腳註引用。

數學範例：勾股定理 a2 + b2 = c2。

註解範例：這是一個重要的概念[1]。

單位範例：房間面積為 30 m2。