Text

List (description)

Published on

Description

Description lists associate terms with descriptions, suitable for glossaries, metadata, and key-value pairs. They offer better semantic structure than tables for this type of content.

Example

Open in new tab
View HTML markup 
<dl>
  <dt>Term</dt>
  <dd>description</dd>
  <dt>Term</dt>
  <dd>description</dd>
  <dt>Term</dt>
  <dd>description</dd>
</dl>

Accessibility

  • Screen reader support for <dl> is adequate across browsers, though Safari has inconsistencies with nested description lists.
  • iOS VoiceOver (14+) supports description list navigation.
  • CSS list-style on <dl> elements destroys semantics. Avoid applying list-related CSS to description lists.
  • If screen readers must announce all nodes or users must navigate via list commands, consider alternative markup.

References

Variables

None for lists