On The <dl>
4 hours ago
- #Semantics
- #Accessibility
- #HTML
- The <dl> element represents a list of name–value pairs, a versatile UI pattern.
- A description list consists of three elements: <dl> (list), <dt> (term/name), and <dd> (detail/value).
- Multiple <dd> elements can follow a single <dt> for terms with multiple values.
- Wrapping <dt> and <dd> elements in a <div> is allowed for styling purposes.
- Semantics of <dl> improve accessibility, e.g., helping screenreaders announce list length and position.
- Despite fallback options, using <dl> provides theoretical and practical user benefits.
- Example uses include glossaries, lodging amenities, rent charges, and Dungeons & Dragons statblocks.
- HTML5 renamed it from 'definition list' to 'description list' to reflect broader use cases.
- Marking up name–value pairs with semantic elements enhances usability across devices.