HTML 語義化

HTML 是典型的「入門容易，精通困難」的技術。深刻理解 HTML 語義是成為優秀前端工程師的重要一步。

為什麼需要語義化？#

語義化的核心價值
對開發者友好：增強程式碼可讀性，便於團隊開發維護
對機器友好：有利於 SEO、讀屏軟體、自動生成目錄等

現代互聯網產品中，HTML 用於描述「軟體界面」多過於「富文本」。在軟體界面場景中，直接使用 div 和 span 是合理的；但在文檔類場景中，語義化標籤則有無可替代的優點。

使用原則#

「用對」比「不用」好，「不用」比「用錯」好
錯誤使用語義標籤會給機器閱讀造成混淆、增加嵌套、給 CSS 編寫加重負擔。

語義化的三大場景#

1. 自然語言延伸#

語義標籤作為純文字的補充，表達文字無法呈現的結構或消除歧義。

em 標籤消除歧義#

<!-- 強調「吃的是蘋果」 -->
今天我吃了一個<em>蘋果</em>。

<!-- 強調「只吃了一個」 -->
今天我吃了<em>一個</em>蘋果。

em 表示重音強調，與 strong（重要性強調）完全不同。

ruby 標籤注音#

<ruby> 空間移動<rp>(</rp><rt>Teleport</rt><rp>)</rp> </ruby>

2. 標題與文檔結構#

HTML 支援自動生成目錄結構的演算法。

標題層級 h1-h6#

<h1>HTML 語義</h1>
<p>內容...</p>
<h2>弱語義</h2>
<p>內容...</p>
<h2>結構性元素</h2>
<p>內容...</p>

hgroup 副標題#

<hgroup>
  <h1>JavaScript 物件</h1>
  <h2>我們需要模擬類嗎？</h2>
</hgroup>

使用 hgroup 後，h1 和 h2 被視為同一標題的不同組成部分，不會產生額外層級。

section 巢狀結構#

<section>
  <h1>HTML 語義</h1>
  <section>
    <h1>弱語義</h1>
  </section>
  <section>
    <h1>結構性元素</h1>
  </section>
</section>

section 會改變 h1-h6 的語義層級，巢狀的 section 會使其中的標題自動下降一級。

3. 整體結構標籤#

應用語義化結構的頁面，可以明確提示頁面資訊的主次關係，支援瀏覽器的「閱讀視圖」功能。

典型頁面結構#

<body>
  <header>
    <nav><!-- 主導航 --></nav>
  </header>
  <aside>
    <nav><!-- 側邊導航 --></nav>
  </aside>
  <section><!-- 主要內容 --></section>
  <footer>
    <address><!-- 聯繫資訊 --></address>
  </footer>
</body>

多文章結構#

<body>
  <header>...</header>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
  <article>...</article>
  <footer>
    <address>...</address>
  </footer>
</body>

常用語義標籤速查#

結構標籤#

標籤	用途
`header`	導航或介紹性內容，通常在前部
`footer`	作者資訊、相關連結、版權資訊
`aside`	與主體不相關的部分（導航、廣告等）
`nav`	導航連結區域
`article`	具有獨立性的文章
`section`	文檔章節
`address`	文章作者的聯繫方式（僅關聯 article 和 body）

文本標籤#

標籤	用途
`strong`	重要性強調
`em`	重音強調
`abbr`	縮寫，title 屬性說明全稱
`dfn`	定義術語
`cite`	引用的作品名稱
`blockquote`	段落級引用
`q`	行內引用
`time`	日期時間，datetime 屬性供機器讀取
`code`	程式碼
`pre`	預格式化文本
`samp`	程式輸出範例

圖文標籤#

<figure>
  <img src="photo.jpg" alt="描述" />
  <figcaption>圖片說明文字</figcaption>
</figure>

figure 用於與主文章相關的圖像、程式碼、表格等自包含內容。

元資訊標籤#

元資訊標籤位於 <head> 中，描述文檔本身而非業務內容。

必要標籤#

<head>
  <meta charset="UTF-8" />
  <title>頁面標題</title>
</head>

charset meta 應放在 head 的第一個位置，確保瀏覽器正確解析後續內容。

viewport 設定#

<meta
  name="viewport"
  content="width=device-width,initial-scale=1,
               minimum-scale=1,maximum-scale=1,
               user-scalable=no"
/>

常用 meta 標籤#

<!-- SEO 相關 -->
<meta name="description" content="頁面描述" />
<meta name="keywords" content="關鍵字1,關鍵字2" />

<!-- 作者資訊 -->
<meta name="author" content="作者名" />

<!-- HTTP 等效 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

ARIA 可訪問性#

可訪問性不僅服務於視障用戶，還包括各種設備、環境和人群的訪問友好性。

ARIA（Accessible Rich Internet Applications）是一組用於可訪問性的屬性標準。

基本用法#

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"
>
</span>
<label id="chk1-label">記住我的偏好</label>

常用 ARIA 角色#

類別	角色	說明
Widget	button, checkbox, radio, textbox	可交互組件
複合組件	combobox, grid, listbox, menu, tablist	複合交互組件
Structure	article, banner, navigation, main	文檔結構
Window	dialog, alertdialog	彈出窗口

ARIA 屬性範例

<!-- Checkbox -->
<div role="checkbox" aria-checked="false">選項</div>

<!-- Button -->
<div role="button" aria-pressed="false" aria-expanded="false">展開選單</div>

<!-- Tab 組件 -->
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>
<div role="tabpanel">Tab 1 內容</div>

總結#

語義化 HTML 的三個核心場景：

自然語言延伸：用標籤表達純文字無法呈現的語義
標題與文檔結構：建立清晰的文檔層級
整體結構標籤：明確頁面資訊的主次關係

記住核心原則：在合適的場景使用合適的標籤，不要為了語義化而語義化。