跳至中央內容區塊 :::
:::

什麼是語意 HTML?無障礙與 SEO 的共同基礎

Semantic HTML

語意 HTML 使用正確元素表達結構與功能,讓瀏覽器、輔助科技與搜尋引擎更容易理解頁面。

最後更新:

重點摘要

  • 語意 HTML 是無障礙與 SEO 的共同基礎。
  • 先用正確元素,再考慮 ARIA。
  • 標題、landmark、按鈕、連結與表單語意會影響輔助科技理解。

常見原則

按鈕執行動作,連結導向位置,標籤命名欄位,標題表達內容階層。依用途選擇原生元素,比先用 div 再補語意與行為容易維護。

例如「送出」使用 button,通常已有角色、焦點與鍵盤啟動行為。div 加上 role="button" 只提供角色;鍵盤啟動、停用狀態與其他行為仍需自己實作。原生元素也需要合適名稱與樣式,不能只靠標籤名稱宣稱整個元件無障礙。

常見問題

語意 HTML 對 SEO 有幫助嗎?

清楚的結構有助於描述內容與用途,但不能保證搜尋排名。使用語意 HTML 的主要理由是讓瀏覽器與輔助科技取得正確結構與行為,不是堆疊標籤當成排名技巧。

相關頁面

參考資料