The <dl> element (description list) pairs terms with their definitions or values — a glossary, an FAQ, or any set of name-value pairs.
Syntax
<dl>
<dt>Term</dt>
<dd>Definition of the term</dd>
</dl>Basic Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — defines the structure of a web page.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — defines how a page looks.</dd>
</dl>Browser output: each <dt> term renders in bold by default, with its <dd> definition indented on the line(s) below it — no bullets or numbers at all.
How It Works
<dt>marks the term (or name) being defined.<dd>marks its description (or value) — one<dt>can be followed by multiple<dd>elements if a term has more than one definition or value.- A single
<dl>can contain multiple term/description pairs, one after another.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Only universal global attributes apply |
Real-World Example
<dl>
<dt>Course Duration</dt>
<dd>6 months, live online</dd>
<dt>Fee</dt>
<dd>₹45,000 (installments available)</dd>
<dt>Certification</dt>
<dd>Yes, on successful completion</dd>
</dl>A course details block — this is a much more semantically correct choice than a <table> or a plain list of paragraphs for this kind of key-value metadata.
Common Mistakes
- Using
<dl>for a plain sequential or unordered list that has nothing to do with term/definition pairs - Reaching for a full
<table>for simple key-value data when a<dl>would be simpler and more semantically accurate
Best Practices
- Use
<dl>for genuine term-definition or label-value pairs: glossaries, metadata blocks, FAQ-style content - Keep each
<dt>/<dd>pairing clear and directly related
Accessibility Considerations
Screen readers can announce the term/description relationship, helping users understand which description belongs to which term — a real structural benefit over an unstructured paragraph doing the same job.
SEO Considerations
Description lists are a natural fit for FAQ-style content and can support structured data patterns that improve rich result eligibility in search.
Browser & Modern HTML Notes
<dl> was historically called a "definition list" in older HTML — HTML5 broadened its meaning to "description list," covering any name-value grouping, not just dictionary-style definitions.
Mini Practice
- Build a description list defining 3 technical terms from this notes site.
- Build a description list showing a product's key specs (name, price, weight) as term/description pairs.
