大結構標籤（<nav>、<main>、<article>）大家都知道要用，但 HTML 還有一批語意標籤——不是最潮、不是最常見，但每次你用 <span> 或 <div> 代替它們，就是在讓爬蟲、螢幕閱讀器、以及三個月後的自己多猜一次。
這篇逐一說清楚什麼時候該用哪個，附上真實情境。
<time> — 讓機器讀得懂你的日期
你現在可能這樣寫：
<span class="date">2026 年 4 月 21 日</span>爬蟲看到這串文字，不知道這是「日期」還是「地址的一部分」還是「標題」。
應該這樣寫：
<time datetime="2026-04-21">2026 年 4 月 21 日</time>datetime 屬性是機器讀的（ISO 8601 格式），標籤內文是人看的。Google 用這個抓文章的發布時間；螢幕閱讀器用這個讓使用者聽到正確的日期語意。
常見用途：
<!-- 文章發布時間 -->
<time datetime="2026-04-21T09:00">今天早上九點</time>
<!-- 持續時間（P = Period，1H = 1 小時） -->
<time datetime="PT1H30M">一小時三十分鐘</time>
<!-- 年月（不指定日期） -->
<time datetime="2026-04">2026 年四月</time><abbr> — 縮寫第一次出現就解釋清楚
常見錯誤：全文都用縮寫，沒解釋過一次。
<!-- 讀者第一次看到不知道 API 代表什麼 -->
<p>我們透過 API 取得資料。</p>加上 <abbr>：
<p>我們透過 <abbr title="Application Programming Interface">API</abbr> 取得資料。</p>滑鼠 hover 會顯示 tooltip，螢幕閱讀器會讀出全名。同一篇文章只需要在第一次出現時加，後面的縮寫不用每個都包。
<details> + <summary> — 不需要 JavaScript 的 accordion
你曾經為了做一個「點擊展開」的區塊寫了幾十行 JS + CSS 嗎？
<details>
<summary>什麼是 CORS？</summary>
<p>
Cross-Origin Resource Sharing，跨來源資源共用。瀏覽器的安全機制，
限制網頁腳本只能請求同來源的資源，除非伺服器明確允許。
</p>
</details>瀏覽器原生支援展開/收合，不需要 JS，不需要 ARIA，鍵盤可操作，螢幕閱讀器也能正確讀出狀態。
適合的場景：
- FAQ 頁面
- 說明文件裡的補充解釋
- 設定面板的進階選項
不適合的場景：
- 需要動畫過渡效果的 accordion（原生版沒有，要加需要 CSS + JS trick）
- 多個項目互斥展開（需要自己加邏輯）
<address> — 聯絡資訊，不只是地址
<address> 常被誤解為「實體地址標籤」，但它的語意是文件或文章作者的聯絡資訊。
<!-- 文章作者資訊（放在 <article> 裡） -->
<article>
<h2>前端架構決策</h2>
<address>
作者：<a href="mailto:terry@example.com">Terry Yao</a>
</address>
<p>...</p>
</article>
<!-- 網站整體聯絡資訊（放在 <footer> 裡） -->
<footer>
<address>
<a href="mailto:hello@example.com">聯絡我們</a> ·
台北市信義區某某路 100 號
</address>
</footer>注意：<address> 裡面不要放跟聯絡資訊無關的內容，它不是通用的「資訊卡」容器。
<search> — 2023 年才正式標準化的 landmark
HTML 的 <search> 是 2023 年初才正式進 HTML 規範的新標籤，對應 ARIA 的 role="search"。
<search>
<form action="/search">
<label for="q">搜尋</label>
<input id="q" type="search" name="q">
<button type="submit">送出</button>
</form>
</search>以前要讓螢幕閱讀器識別「這是搜尋區塊」，需要手動加 role="search" 在 <div> 上。現在用 <search> 原生語意就夠。
瀏覽器支援度 2024 年底已經全線 Evergreen，可以用了。
<cite> — 引用的是作品名稱，不是人名
<cite> 用來標記創意作品的名稱（書名、電影名、歌名、文章標題、軟體名稱），不是用來標記引用者的名字。
<!-- 正確：引用作品名稱 -->
<p>
我最近在重讀 <cite>Clean Code</cite>，覺得命名的那章值得反覆看。
</p>
<!-- 錯誤：用來標記人名 -->
<p>— <cite>Robert C. Martin</cite> 說</p> <!-- ❌ 這是人名，不是作品 --><blockquote> 的引文來源用 <cite> 標記是標準做法：
<blockquote>
<p>任何傻瓜都能寫出電腦能看懂的程式；好的程式設計師寫出人能看懂的程式。</p>
<footer>— <cite>Martin Fowler</cite>, <cite>Refactoring</cite></footer>
</blockquote><small> — 法律文字、版權聲明、補充說明
<small> 的語意是「附屬細則」（fine print）：版權聲明、法律免責聲明、條款說明。不是「我想要小一點的字」。
<footer>
<small>© 2026 Terry Yao. 本站文章採 CC BY-NC 授權，轉載請附出處。</small>
</footer>
<!-- 商品價格旁的稅後說明 -->
<p>NT$1,200 <small>（含稅）</small></p>想要視覺小字 → 用 CSS font-size。 <small> 是語意，不是樣式。
<figure> + <figcaption> — 不只是圖片
semantic.md 有帶過這組，但這裡補幾個常被忽略的用途：
<!-- 程式碼區塊加說明 -->
<figure>
<pre><code>const add = (a, b) => a + b;</code></pre>
<figcaption>圖 1：箭頭函式寫法</figcaption>
</figure>
<!-- 引言 -->
<figure>
<blockquote>
<p>Make it work, make it right, make it fast.</p>
</blockquote>
<figcaption>— Kent Beck</figcaption>
</figure>
<!-- 影片 -->
<figure>
<video src="demo.mp4" controls></video>
<figcaption>示範：拖曳排序的互動效果</figcaption>
</figure><figure> 的核心定義是「可以從文章主流程移走、但仍然有關聯的內容」——不限圖片，程式碼、圖表、引言、影片都適用。
快速選擇指南
| 情境 | 標籤 |
|---|---|
| 日期 / 時間 | <time datetime="..."> |
| 縮寫第一次出現 | <abbr title="..."> |
| 點擊展開的內容 | <details> + <summary> |
| 作者 / 聯絡資訊 | <address> |
| 搜尋表單的外框 | <search> |
| 作品名稱（書、電影、文章） | <cite> |
| 版權宣告 / 法律細則 | <small> |
| 圖片 / 程式碼 / 引言 + 說明 | <figure> + <figcaption> |
相關文章
- HTML 語意化標籤：結構六大標籤與判斷方法 — 大結構標籤（nav / main / article / section）
- 為什麼不能只用 div — 語意化的根本理由
- ARIA 和原生語意的選擇時機 — 什麼時候原生語意不夠，要補 ARIA