While standard ordered and unordered lists are perfect for sequential items, some data inherently consists of precise key-value pairs—think dictionaries, glossaries, or FAQs. HTML provides 'Description Lists' as a highly semantic way to group specific terms with their corresponding definitions or data payloads.
1Structuring the Description List
A description list requires a strict triad of elements. The <dl> (Description List) acts as the main structural wrapper. Inside, you explicitly define the key or term using the <dt> (Description Term) tag. This is followed immediately by its corresponding value or definition using the <dd> (Description Details) tag.
By default, the browser's rendering engine automatically applies a left margin to the <dd> element, creating a visually distinct hierarchy between the term and its definition.
2Complex Data Relationships
Description lists are incredibly flexible and support complex data models. A single term might possess multiple distinct definitions. You can semantically represent this 'One-to-Many' relationship by placing multiple <dd> tags immediately after a single <dt> tag. This is heavily utilized in standard dictionary layouts.
Conversely, multiple synonymous terms might share the exact same definition. Instead of violating DRY (Don't Repeat Yourself) principles by duplicating the <dd> element, HTML allows you to stack multiple <dt> elements consecutively before providing the shared <dd>.
3Modern Grouping and Accessibility
Historically, you could not group <dt> and <dd> pairs together for styling without breaking strict HTML validation. Modern HTML5 resolves this by explicitly allowing the generic <div> tag directly inside a <dl> to wrap a key-value pair. This is an absolute necessity when you need to use CSS Flexbox or Grid to build a side-by-side card layout for metadata.
When a screen reader encounters a properly formatted <dl>, it immediately announces the presence of a description list and the total number of items. As the user navigates, the software contextually associates the <dt> label directly with its <dd> data payload, providing a vastly superior experience compared to using generic paragraphs.
