:::
什麼是語意 HTML?無障礙與 SEO 的共同基礎
Semantic HTML
語意 HTML 使用正確元素表達結構與功能,讓瀏覽器、輔助科技與搜尋引擎更容易理解頁面。
最後更新:
重點摘要
- 語意 HTML 是無障礙與 SEO 的共同基礎。
- 先用正確元素,再考慮 ARIA。
- 標題、landmark、按鈕、連結與表單語意會影響輔助科技理解。
常見原則
按鈕執行動作,連結導向位置,標籤命名欄位,標題表達內容階層。依用途選擇原生元素,比先用 div 再補語意與行為容易維護。
例如「送出」使用 button,通常已有角色、焦點與鍵盤啟動行為。div 加上 role="button" 只提供角色;鍵盤啟動、停用狀態與其他行為仍需自己實作。原生元素也需要合適名稱與樣式,不能只靠標籤名稱宣稱整個元件無障礙。
常見問題
語意 HTML 對 SEO 有幫助嗎?
清楚的結構有助於描述內容與用途,但不能保證搜尋排名。使用語意 HTML 的主要理由是讓瀏覽器與輔助科技取得正確結構與行為,不是堆疊標籤當成排名技巧。