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

最後更新: 2026-09-30

英文版本：[https://accesserty.com/en/ai/glossary/semantic-html.md](https://accesserty.com/en/ai/glossary/semantic-html.md)

頁面版本：[https://accesserty.com/glossary/semantic-html/](https://accesserty.com/glossary/semantic-html/)

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

## 摘要

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

## 常見原則

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

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

## 常見問題

### 語意 HTML 對 SEO 有幫助嗎？

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

## 相關頁面

- [原生 HTML 與 ARIA 的選擇](https://accesserty.com/guides/aria-patterns-for-developers/)
- [了解 ARIA 的能力與限制](https://accesserty.com/glossary/aria/)
- [純 HTML 載入元件的範例](https://accesserty.com/uikit/)

## 參考資料

- [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)