<dl>: 描述列表元素

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

試試看

屬性

此元素僅包含 全域性屬性。

無障礙

每個螢幕閱讀器以不同的方式顯示 <dl> 內容，包括總數、術語/定義上下文和導航方法。這些差異不一定是錯誤。從 iOS 14 開始，VoiceOver 將在使用虛擬游標導航時（不是透過“全部朗讀”命令）宣佈 <dl> 內容是列表。VoiceOver 不支援使用 <dl> 進行列表導航命令。請謹慎將 ARIA term 和 definition 角色應用於 <dl> 結構，因為 VoiceOver（macOS 和 iOS）將調整它們的宣佈方式。

示例

單個術語和描述

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 元素中

HTML 允許將每個名稱-值組包裝在一個 <dl> 元素中，該元素位於 <div> 元素中。當使用 微資料，或當 全域性屬性 應用於整個組，或出於樣式目的時，這可能很有用。

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 屬性。

技術概要

內容類別 流動內容，如果 <dl> 元素的子元素包含一個名稱-值組，則為可感知的內容。
允許的內容

要麼：零個或多個組，每個組包含一個或多個 <dt> 元素，後跟一個或多個 <dd> 元素，可以選擇與 <script> 和 <template> 元素混合使用。
或：（在 WHATWG HTML、W3C HTML 5.2 及更高版本中）一個或多個 <div> 元素，可以選擇與 <script> 和 <template> 元素混合使用。
標籤省略 沒有，開始和結束標籤都是必需的。
允許的父元素 任何接受 流動內容 的元素。
隱式 ARIA 角色 沒有相應的角色
允許的 ARIA 角色 group、list、none、presentation
DOM 介面 HTMLDListElement

規範

規範
HTML 標準
# the-dl-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱