The <dd> Element
As defined in the HTML Living Standard, the <dd> (Description Details) element represents the description, definition, or value part of a term-description group in a description list (<dl>).
- HTML
- HyperText Markup Language
- WCAG
- Web Content Accessibility Guidelines
<dl>
<dt>A11y</dt>
<dd>A numeronym for accessibility.</dd>
</dl>
View HTML Living Standard: The dd element
Structural Role
The <dd> element is part of a structural triplet. It must be a child of a <dl> element and must follow a <dt> (Description Term) or another <dd>.
- Multiple Details: A single term (
<dt>) can have multiple details (<dd>). For example, a word in a dictionary with several definitions. - Content Model: Unlike
<dt>, which is restricted to phrasing content, the<dd>element can contain flow content, including paragraphs, lists, and even other description lists.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using the <dl>, <dt>, and <dd> structure creates a programmatic link between terms and their definitions. Screen readers allow users to navigate these lists by jumping from term to term, announcing the relationship explicitly (e.g., "Term: WCAG, Definition: Web Content Accessibility Guidelines").
Styling Best Practices
Browsers typically apply a left margin (margin-start) to <dd> elements to indent them visually.
A11y Tip: Avoid Visual-Only Lists
Do not use <dd> purely for visual indentation outside of a <dl>. If you just need a margin, use CSS. Using semantic list elements for non-list content confuses assistive technology users who expect a specific structure.