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.
4Step-by-Step Breakdown
Introduction to Description Lists. While standard lists are perfect for sequential items, some data inherently consists of key-value pairs (e.g., dictionaries, FAQs). HTML provides 'Description Lists'—a highly semantic way to group terms with their corresponding definitions or descriptions.
Structuring the List: dl, dt, and dd. A description list requires three elements. The <dl> acts as the main wrapper. Inside, you define the key using the <dt> (Description Term) tag, followed immediately by its value using the <dd> (Description Details) tag. The browser natively applies a left margin to the <dd> element.
Definition Details. If you are building a glossary and have already defined the primary term using a <dt> tag, which specific tag must you use to provide the actual definition, value, or detailed explanation associated with that specific term?
- →dt
- →dd
- →li
Multiple Descriptions for a Single Term. Description lists are incredibly flexible. A single term might possess multiple distinct definitions. You can semantically represent this by placing multiple <dd> tags immediately after a single <dt> tag. This is particularly useful in glossaries.
Multiple Descriptions. Description lists are incredibly flexible. True or False? You can place multiple <dd> tags immediately after a single <dt> tag to represent a term with multiple distinct definitions.
- →True
- →False
Multiple Terms for a Single Description. Conversely, multiple terms might share the exact same definition. Instead of repeating the <dd> element, HTML allows you to stack multiple <dt> elements consecutively before providing the shared <dd>. This keeps your code DRY.
Shared Definition. To group synonyms or localized terminology without repeating code, HTML allows you to stack multiple <dt> elements consecutively before providing a single shared <dd> element.
- →Valid
- →Invalid
Styling Description Lists. While browsers automatically indent <dd> tags, you have full architectural control using CSS. You can easily reset default margins, apply typography changes, or add layout borders to create a cleaner, more customized metadata display.
Modern Grouping with Divs. Historically, you could not group <dt> and <dd> pairs without breaking validation. However, modern HTML5 explicitly allows wrapping individual key-value pairs inside a <div> element strictly within the <dl>. This allows for side-by-side Flexbox card layouts.
Modern Grouping. Historically, you could not group <dt> and <dd> pairs without breaking validation. In modern HTML5, which generic tag is explicitly allowed directly inside a <dl> to wrap a key-value pair for styling purposes?
- →span
- →div
- →section
- →article
Accessibility Implications. When a screen reader encounters a properly formatted <dl>, it announces the presence of a description list and the total number of key-value pairs. As the user navigates, the software contextually associates the <dt> label directly with its <dd> data.
Semantic Usage Patterns. Consider the semantic relationship between a question and an answer. True or False? The strict semantic structure of a description list makes it highly appropriate for an FAQ section.
- →True
- →False
Mastery and Next Steps. Congratulations on fully mastering HTML description lists! You now possess the semantic tools necessary to elegantly handle key-value pairs, glossaries, metadata groups, and dynamic FAQs. In our next module, we demystify HTML Tables, expertly structuring multi-dimensional data.
Build A Definition List. <dl> pairs a term (<dt>) with its definition (<dd>).
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Screen Readers Announce List Semantics and Item Counts
A properly formed `<dl>` is announced as a description list with its total number of term/definition pairs, letting users decide upfront whether to dive in or skip past it — a benefit completely lost if the same content is built from generic `<p>` tags.
2Don't Use `<dl>` Purely for Visual Two-Column Layouts
If the content isn't genuinely a set of terms and their definitions (e.g., it's just two unrelated columns of text), using `<dl>`/`<dt>`/`<dd>` misrepresents the relationship to assistive technology — use CSS Grid on plain containers instead.
SEO Implications
- 1
Description Lists Are a Strong Match for FAQ Rich Results
A semantically correct `<dl>` of question/answer pairs closely mirrors FAQPage structured data expectations, reinforcing to search engines that the content genuinely is a Q&A set rather than arbitrary prose.
- 2
Glossary Pages Benefit From Definition List Semantics
Search engines can better identify a page as an authoritative glossary or reference resource when terms and definitions are marked up with `<dl>`/`<dt>`/`<dd>` rather than as an unstructured wall of bolded terms in paragraphs.
Best Practices
Use Multiple `<dd>` Tags for a Term With Several Distinct Definitions
Stacking `<dd>` elements after a single `<dt>` correctly models a term with multiple meanings (like a dictionary entry), rather than awkwardly cramming multiple definitions into one `<dd>` separated by line breaks.
Wrap Term/Definition Pairs in a `<div>` When You Need Flexbox or Grid Styling
HTML5 explicitly permits a `<div>` directly inside `<dl>` to group a `<dt>`/`<dd>` pair — this is the sanctioned way to build a card-style metadata layout without breaking the list's semantics or validity.
Frequent Bugs
A CSS Grid or Flexbox layout applied to `<dt>`/`<dd>` pairs doesn't align correctly, because some terms have multiple definitions and others don't.
Wrap each `<dt>`+`<dd>`(s) group in its own `<div>` (valid in HTML5) so each pair becomes a single grid/flex item, rather than trying to lay out a variable number of loose `<dt>`/`<dd>` siblings directly.
A description list built for an FAQ section doesn't get picked up by an FAQPage schema validator.
Structured data (JSON-LD) and visible `<dl>` markup are two separate systems — using `<dl>` alone doesn't automatically generate the `FAQPage` schema. You still need a separate `<script type="application/ld+json">` block mirroring the same question/answer content.
Real-World Examples
API Glossary Page
A developer documentation site defines technical terms using a semantic description list, letting screen reader users hear the total term count upfront and navigate pairs predictably.
<dl>
<dt>Idempotent</dt>
<dd>An operation that produces the same result no matter how many times it's applied.</dd>
<dt>Payload</dt>
<dd>The actual data being transmitted, as opposed to headers or metadata.</dd>
</dl>