The <dd> Element
As defined in the HTML Living Standard, the <dd> (Description Details) element is used to provide one or more or more descriptions, definitions, or values for the preceding term(s) in a description list (<dl>).
- Coffee
- Black hot drink
- Milk
- White cold drink
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>
View HTML Living Standard: The dd element
Content Model & Relationships
The <dd> element is a child of the <dl> element. It can contain flow content, meaning it can hold paragraphs, images, lists, or even other description lists.
- One-to-Many: A single term (
<dt>) can be followed by multiple<dd>elements if the term has multiple definitions. - Many-to-One: Multiple terms can be followed by a single
<dd>if several terms share the same description.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <dd>, you explicitly link the description to its term. Screen readers announce this relationship, allowing users to understand that the text is a definition of the preceding term rather than just another paragraph.
Styling the Description
By default, browsers indent the <dd> element. To maintain accessibility, ensure that the visual indentation is supported by sufficient color contrast and that the relationship remains clear even if CSS fails to load.
dd {
margin-left: 1.5rem;
margin-bottom: 0.5rem;
color: #444;
}