<dl>：描述清單元素

<dl> HTML 元素代表一個描述清單。該元素包含一組術語（使用 <dt> 元素指定）和描述（由 <dd> 元素提供）。此元素的常見用途包括實現詞彙表或顯示後設資料（一組鍵值對的串列）。

嘗試一下

屬性

此元素僅包括全域屬性 (en-US)。

範例

單個術語和描述

html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

結果

多個術語，單個描述

html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

結果

單個術語，多個描述

html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

結果

多個術語和描述

也可以通過結合上面的範例來定義多個術語與多個相應描述。

後設資料

描述清單可用於將後設資料顯示為鍵值對的串列。

html
<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

結果

提示：在 CSS 中定義鍵值分隔符可能很方便，例如：

css
dt::after {
  content: ": ";
}

將名稱-值組包裝在 div 元素中

WHATWG (en-US) HTML 允許將每個名稱-值組包裝在 <dl> 元素中的 <div> 元素中。這在使用微數據 (en-US)或當全域屬性 (en-US)適用於整個組時或用於樣式目的時很有用。

html
<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

結果

備註

請勿僅使用此元素（也不要使用 <ul> 元素）來在頁面上創建縮排。雖然它有效，但這是一種不良實踐，會混淆描述清單的含義。

要更改描述術語的縮排，請使用 CSS margin (en-US) 屬性。

無障礙議題

每個螢幕閱讀器以不同方式顯示 <dl> 內容，包括總計數、術語/定義上下文和導覽方法。這些差異不一定是錯誤。 截至 iOS 14，VoiceOver 在使用虛擬游標導覽（不是通過讀取所有命令）時將宣告 <dl> 內容為列表。VoiceOver 不支援 <dl> 的列表導覽命令。請小心將 ARIA term 和 definition 角色應用於 <dl>結構時，因為 VoiceOver（macOS 和 iOS）會調整它們的宣告方式。

技術摘要

內容類型 流內容，如果 <dl> 元素的子項目包含一個名稱-值組，則為捫及內容。
允許的內容

零個或多個組，每個組都包含一個或多個 <dt> 元素，後跟一個或多個 <dd> 元素，可選地與 <script> 和 <template> 元素交錯。
或（在 WHATWG (en-US) HTML、W3C HTML 5.2 及更高版本中）一個或多個 <div> 元素，可選地與 <script> 和 <template> 元素交錯。
標籤省略 不允許，開始和結束標籤都是必須的。
允許的父元素 任何接受流內容的元素。
隱含的 ARIA 角色 沒有相對應的角色
允許的 ARIA 角色 group (en-US)、list (en-US)、none (en-US)、presentation (en-US)
DOM 介面 HTMLDListElement (en-US)

規範

Specification
HTML Standard
# the-dl-element

瀏覽器相容性

BCD tables only load in the browser

參見