.NET 開發者易忽略的 HTML 標籤：q、blockquote、dl、em

前言

ASP.NET 開發習慣大量使用伺服器控件（<asp:...>），導致許多原生 HTML 語義標籤被遺忘。本文回顧幾個常被忽略但極具語義價值的標籤。

1. <q> 與 <blockquote>：行內 vs 區塊引用

• <q>：行內元素，用於段落內短引用。瀏覽器通常自動加上引號。
• <blockquote>：區塊元素，用於長段落、整段引用，預設縮排顯示。

<!-- 區塊引用 -->
李白曾寫過：
<blockquote>
床前明月光，<br/>
疑是地上霜。<br/>
舉頭望明月，<br/>
低頭思故鄉。
</blockquote>

<!-- 行內引用 -->
孔子曾曰：<q>三人行，必有我師焉</q>

2. 列表不只 ul/ol：dl 定義列表

HTML 提供三種列表：

• <ul> 無序列表
• <ol> 有序列表
• <dl> 定義列表（<dt> 術語 + <dd> 定義）

<dl>
  <dt>人</dt>
  <dd>人是一種高級動物</dd>
  <dt>動物</dt>
  <dd>動物是一種低級的人</dd>
</dl>

建議：用最貼切語義的標籤表達內容，而非通用 <div>/<span> 配合 CSS。

3. <em>：語義強調而非樣式

<em> 表示「強調」，預設瀏覽器以斜體渲染，但不應假設呈現形式。IE 可能加粗、Firefox 可能傾斜、螢幕閱讀器會變調語氣。正確做法：

• HTML 僅表達語義（<em>、<strong>、<cite>...）。
• 樣式交由 CSS 定義，實現結構與表現分離。
• 優先使用瀏覽器原生渲染，減少跨瀏覽器差異，提升可維護性。

擴展閱讀

• W3C HTML5.2 <em> 定義
• MDN HTML 元素參考

結語

語義化 HTML 不僅利於 SEO、無障礙存取，更能讓團隊溝通更精準。下次動手寫 <div class="quote"> 前，先問自己：有沒有更適合的原生標籤？