HTML Description Lists: <dl>, <dt> & <dd>
A description list groups terms with their descriptions. The <dl> tag wraps the list, each <dt> holds a term or name, and each <dd> holds the description or value that follows it. Use it for glossaries, metadata and question-and-answer pairs, anywhere content comes in name-value groups.
Last updated: October 3, 2026
Quick facts
| Category | Flow content (<dl>) |
| Content model | Groups of one or more <dt> followed by one or more <dd>, optionally each group wrapped in a <div> |
| Tag omission | <dl> cannot be omitted. A <dt> or <dd> end tag may be left out when another <dt>/<dd> follows, but writing it is best practice |
| Permitted parents | <dl>: any element that accepts flow content. <dt>/<dd>: a <dl>, or a <div> inside one |
| DOM interfaces | HTMLDListElement, HTMLElement (<dt>, <dd>) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | All three elements accept only the global attributes. The old compact attribute on <dl> is obsolete; use CSS spacing instead. |
Common examples
A glossary
Each term in <dt>, its explanation in <dd>.
Product specifications
Name–value pairs like specs are a perfect fit, and easier to style than a table on phones.
Terms beside their descriptions
CSS grid puts each term and description on one row.
Description list vs headings and paragraphs
For short name–value pairs — specs, metadata, a glossary — a <dl> keeps each term and its description tied together, and screen readers announce it as a list with a number of items.
When each description is long, with several paragraphs, images or lists, use headings and paragraphs instead. Headings make long content easy to skim and jump through, which a <dl> doesn’t.
| <dl> | Headings + paragraphs | |
|---|---|---|
| Best for | Short pairs | Long explanations |
| Navigation | Read as a list | Jump by heading |
| Example | Specs, glossary | Guides, articles |
Common mistakes to avoid
- Using
<dl>just for indentation. The indented<dd>look is a default style, not a reason to use the element. - Putting a
<dd>before its<dt>. Terms come first, followed by their descriptions. - Wrapping pairs in anything other than a
<div>. Only divs are allowed as wrappers inside a<dl>. - Using it for dialogue. Speaker and line isn’t a term and description; use paragraphs.
Accessibility & SEO tips
- Description lists are a clean, readable way to present FAQs or specs that search engines can pick out as structured information.
- Keep terms short so the list is easy to scan on small screens.
- If you need to sort or compare many items across several attributes, a <table> works better.
- Add a heading above each description list so its topic is clear to readers who skim and to screen reader users jumping between headings.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.