<dl>: The Description List element

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

¥Examples

¥Single term and description

<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>

结果

¥Result

¥Multiple terms, single description

<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>

结果

¥Result

¥Single term, multiple descriptions

<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>

结果

¥Result

¥Multiple terms and descriptions

还可以通过组合以上示例来定义具有多个相应描述的多个术语。

¥It is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above.

¥Metadata

描述列表对于将元数据显示为键值对列表非常有用。

¥Description lists are useful for displaying metadata as a list of key-value pairs.

<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>

结果

¥Result

提示：在 CSS 中定义键值分隔符会很方便，例如：

¥Tip: It can be handy to define a key-value separator in the CSS, such as:

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

¥Wrapping name-value groups in div elements

WHATWG HTML 允许将 <dl> 元素中的每个名称-值组封装在 <div> 元素中。当使用 microdata、或当 全局属性 应用于整个组或用于样式目的时，这可能很有用。

¥WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.

<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>

结果

¥Result

¥Notes

请勿使用此元素（或 <ul> 元素）仅在页面上创建缩进。虽然它有效，但这是一种不好的做法，并且模糊了描述列表的含义。

¥Do not use this element (nor <ul> elements) to merely create indentation on a page. Although it works, this is a bad practice and obscures the meaning of description lists.

要更改描述术语的缩进，请使用 CSS margin 属性。

¥To change the indentation of a description term, use the CSS margin property.

¥Accessibility concerns

每个屏幕阅读器以不同的方式显示 <dl> 内容，包括总数、术语/定义上下文和导航方法。这些差异不一定是错误。从 iOS 14 开始，当使用虚拟光标（而不是通过读取全部命令）导航时，VoiceOver 将宣布 <dl> 内容是一个列表。VoiceOver 不支持 <dl> 的列表导航命令。将 ARIA term 和 definition 角色应用于 <dl> 结构时请小心，因为 VoiceOver（macOS 和 iOS）将调整它们的宣布方式。

¥Each screen reader exposes <dl> content differently, including total count, terms/definitions context, and navigation methods. These differences are not necessarily bugs. As of iOS 14, VoiceOver will announce that <dl> content is a list when navigating with the virtual cursor (not via the read-all command). VoiceOver does not support list navigation commands with <dl>. Be careful applying ARIA term and definition roles to <dl> constructs as VoiceOver (macOS and iOS) will adjust how they are announced.

• iOS 14 上的 VoiceOver 支持描述列表
• 关于描述列表支持的简要说明

¥Technical summary

¥See also

• <dt>
• <dd>