重新發現 <dl> 元素：語義化名稱-值對的力量

現代的網頁通常建立在嵌套的 <div> 元素基礎之上，創造出一種「div soup」現象，這雖然為視覺提供了結構，但對機器而言卻幾乎沒有意義。在許多因通用容器而遭到冷落的專用 HTML 元素中，<dl>（即描述列表）就是其中之一。

雖然它看起來像是用於術語表的利基工具，但描述列表實際上是一個功能極其強大的元素，旨在表示任何名稱-值對（name-value pairs）的列表。從產品規格、住宿設施到技術元數據，<dl> 提供了一個語義框架，能提升無障礙體驗與數據結構。

The Anatomy of a Description List

描述列表並非單一元素，而是由三個協同工作的元素組成：

  1. <dl> (Description List): 定義列表開始與結束的包裝元素。
  2. <dt> (Description Term): 成對元素中的「名稱」或鍵（key）。
  3. <dd> (Description Detail): 與該術語相關聯的「值」或定義。

Basic Implementation

一個簡單的名稱-值對如下所示：

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
</dl>

Handling One-to-Many Relationships

<dl> 最強大的功能之一是處理單一術語對應多個值的能力。例如，如果一本書有多位作者，您只需在單個 <dt> 後方添加多個 <dd> 元素即可：

<dl>
  <dt>Author</dt>
  <dd>Jeffrey Zeldman</dd>
  <dd>Ethan Marcotte</dd>
</dl>

Styling with Wrapper Divs

從歷史上看，為 <dl> 元素設定樣式一直是一項挑戰，因為您無法將術語與詳細資訊包裝在容器中。然而，現在的 HTML 規範已明確允許將 <dt> 及其對應的 <dd>(s) 包裝在一個 <div> 中。這是唯一被允許包裝這些組別的元素，這使得使用 Flexbox 或 CSS Grid 來建立並排佈局而不會破壞語義成為可能。

<dl>
  <div>
    <dt>Publisher</dt>
    <dd>New Riders Pub; 3rd edition</dd>
  </div>
</dl>

Why Semantics Matter

使用帶有 .label 和 .value 等類別的嵌套 <div> 是很有誘惑力的，因為它們提供了完全的靈活性。然而，語義化 HTML 提供了通用容器無法提供的關鍵益處：

Accessibility and Screen Readers

當瀏覽器識別出 <dl> 時，它會將結構傳達給輔助技術。螢幕閱讀器使用者可以獲得以下幾項優勢：

  • Context: 設備可以宣佈列表中的名稱-值組別總數。
  • Navigation: 使用者可以追蹤其進度（例如，「第 2 項，共 5 項」）。
  • Efficiency: 如果資訊與使用者無關，使用者可以跳過整個區塊，而不是逐一透過 tab 鍵切換每一個文本節點。

Machine Readability

除了無障礙體驗之外，語義化標記也有助於 AI 工具和爬蟲理解數據點之間的關係。<div> 沒辦法告訴機器關於兩個文本字串之間的關係；而 <dt> 和 <dd> 則明確地將鍵與其值連結起來。

Advanced Use Cases: The "Statblock" Pattern

若要觀察 <dl> 的多功能性，可以考慮像 Dungeons & Dragons 角色卡這樣複雜的數據集。單個角色檔案可以包含多個不同的描述列表：

  • Basic Stats: Armor Class, Hit Points, and Speed.
  • Ability Scores: STR, DEX, CON, INT, WIS, CHA.
  • Proficiencies: Senses, Languages, and Challenge rating.
  • Traits: Named abilities with long-form descriptions.
  • Actions: Attack names linked to their combat mechanics.

透過將這些拆分為獨立的 <dl> 區塊——通常會配合 aria-label 以增加清晰度——開發者可以將混亂的文本牆轉化為結構化、可導航的數據庫。

Critical Perspectives and Nuances

雖然 <dl> 功能強大，但並非沒有批評者與技術陷阱。社群討論強調了幾個關鍵考量因素：

The Flexibility Trade-off

有些開發者認為 <dl> 太過受限。正如一位貢獻者所言：

"Every time I’ve reached for a <dl> I’ve eventually regretted it because I wanted multiple levels of wrappers, or a divider between sections... they make this stuff with some flexibility but nowhere near enough to actually cover the generalized concept it purports to."

ARIA Implementation

關於 <dl> 元素上的 aria-label 存在技術細節。由於 <dl> 在所有瀏覽器中並不具備隱含的 ARIA role，單純添加 aria-label 可能是不夠的。為了確保完全的無障礙體驗，有人建議在 <dl> 上添加 role="list" 並在包裝的 <div> 上添加 role="listitem" 以確保標籤被正確宣佈。

The "Definition" Misnomer

值得注意的是，該元素最初被稱為「Definition List」（定義列表）。雖然名稱已演變為「Description List」（描述列表）以反映其作為鍵值對存儲的更廣泛用途，但有些人仍覺得在用於簡單屬性（例如「Author: Tolkien」）時，術語使用起來有些突兀，因為此時並未實際進行「定義」動作。

Summary Table:
vs. Alternatives

Feature <dl> <table> Nested <div>s
Semantic Meaning High (Name-Value) High (Tabular) None
Accessibility Built-in for pairs Built-in for grids Manual (ARIA)
Flexibility High Low High
Best Use Case Metadata, Glossaries Comparative Data Custom UI Layouts

透過利用 <dl> 元素，開發者可以超越視覺樣式，開始建立一個從根本上更具無障礙性與結構化的網頁。

Sources