<dl>: Description List 元素

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

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

試一試

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

屬性

此元素也接受全域性屬性。

compact 已棄用: 這個布林屬性暗示列表應以緊湊的樣式呈現。對此屬性的解釋取決於瀏覽器。請改用 CSS：要實現與 compact 屬性類似的效果，可以使用 CSS 屬性 line-height 並將其值設定為 80%。

每個螢幕閱讀器對 <dl> 內容的暴露方式不同，包括總數、術語/定義上下文和導航方法。這些差異不一定是 bug。在 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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年7月9日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題