<dl>：描述清單元素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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;
}
屬性
此元素僅包括全域屬性。
範例
單個術語和描述
<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>
結果
多個術語，單個描述
<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>
結果
單個術語，多個描述
<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>
結果
多個術語和描述
也可以通過結合上面的範例來定義多個術語與多個相應描述。
後設資料
描述清單可用於將後設資料顯示為鍵值對的串列。
<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 中定義鍵值分隔符可能很方便，例如：
dt::after {
content: ": ";
}
將名稱-值組包裝在 div 元素中
WHATWG HTML 允許將每個名稱-值組包裝在 <dl> 元素中的 <div> 元素中。這在使用微數據或當全域屬性適用於整個組時或用於樣式目的時很有用。
<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> 元素）來在頁面上創建縮排。雖然它有效，但這是一種不良實踐，會混淆描述清單的含義。
無障礙議題
每個螢幕閱讀器以不同方式顯示 <dl> 內容，包括總計數、術語/定義上下文和導覽方法。這些差異不一定是錯誤。
截至 iOS 14，VoiceOver 在使用虛擬游標導覽（不是通過讀取所有命令）時將宣告 <dl> 內容為列表。VoiceOver 不支援 <dl> 的列表導覽命令。請小心將 ARIA term 和 definition 角色應用於 <dl>結構時，因為 VoiceOver（macOS 和 iOS）會調整它們的宣告方式。
技術摘要
| 內容類型 |
流內容，如果 <dl> 元素的子項目包含一個名稱-值組，則為捫及內容。
|
|---|---|
| 允許的內容 |
零個或多個組，每個組都包含一個或多個 |
| 標籤省略 | 不允許，開始和結束標籤都是必須的。 |
| 允許的父元素 | 任何接受流內容的元素。 |
| 隱含的 ARIA 角色 | 沒有相對應的角色 |
| 允許的 ARIA 角色 |
group、list、none、presentation
|
| DOM 介面 | HTMLDListElement |
規範
| Specification |
|---|
| HTML # the-dl-element |
瀏覽器相容性
Loading…