The <dl> Element
As defined in the HTML Living Standard, the <dl> element represents a description list. It consists of zero or more term-description groups. Each group consists of one or more terms (represented by <dt> elements) and one or more descriptions (represented by <dd> elements).
- Coffee
- Black hot drink
- Milk
- White cold drink
<dl>
<dt>Term</dt>
<dd>Description of the term.</dd>
</dl>
View HTML Living Standard: The dl element
Structure and Content Model
The <dl> element has a strict relationship with its children:
- Children: It can contain
<dt>and<dd>elements, or<div>elements that wrap<dt>/<dd>pairs. - Styling with Divs: Modern HTML allows wrapping term-description groups in a
<div>specifically for styling purposes (like applying a border around a group). - Flexibility: Multiple terms can be associated with a single description, and a single term can have multiple descriptions.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <dl> correctly ensures that assistive technologies understand the relationship between a name and its value. Screen readers provide specific navigational commands for lists, allowing users to jump between terms. If you use generic paragraphs or divs instead of a description list, this programmatic relationship is lost.
Common Use Cases
- Glossaries: Defining terms and their meanings.
- Metadata: Displaying key-value pairs like "Author: John Doe".
- FAQs: Representing questions (terms) and answers (descriptions).
A11y Tip: List Sizing
Be careful not to overcomplicate the nesting within a <dl>. If the list becomes very long or complex, consider if a <table> or a series of <section> elements with headings might be easier for a user to navigate.