什麼是 HTML 語意化？

什麼是 HTML 語意化？

HTML 語意化是指使用具有明確含義的 HTML 標籤來描述網頁內容的結構，而非單純使用 <div> 或 <span> 等無語義標籤。

語意化 vs 非語意化

<!-- 非語意化 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

<!-- 語意化 -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

常見語意化標籤

標籤	用途
<header>	頁首或區塊標頭
<nav>	導覽連結區塊
<main>	頁面主要內容
<article>	獨立的內容單元（文章、貼文）
<section>	頁面的章節或區塊
<aside>	補充資訊（側欄）
<footer>	頁尾或區塊底部

語意化的好處

1. SEO 優化：搜尋引擎能更準確理解頁面結構與重要內容
2. 無障礙性（Accessibility）：螢幕閱讀器可正確解讀內容，提升使用者體驗
3. 可維護性：程式碼更易於閱讀與維護
4. 瀏覽器預設樣式：部分語意標籤有適當的預設樣式與行為