Beyond the Glossary: The Power of Definition Lists
When you need to create a list, your first instinct is probably to reach for `<ul>` (unordered lists) or `<ol>` (ordered lists). But HTML offers a third, powerful list type that's often overlooked: the **Definition List**.
A definition list isn't just for dictionary definitions. It's the semantically correct way to represent any **key-value pairs**. This structure is created using three tags:
<dl>: The "Definition List" container. It wraps the entire group of terms and descriptions.<dt>: The "Definition Term". This is the "key" or the item being defined.<dd>: The "Definition Description". This is the "value" or the description of the term.
Why bother? Why not just use a `<p>` tag with a `<strong>` tag for the term? The answer is **semantics**. By using<dl>, you are explicitly telling browsers, search engines, and assistive technologies (like screen readers) that there is a direct relationship between the <dt> and the <dd>. A screen reader can announce "term" before reading the <dt> and "description" before the <dd>, making the content far more accessible.
Practical Use Cases
Beyond a simple glossary, definition lists are perfect for many common UI patterns.
1. Metadata & Product Specifications
Any time you're listing features or properties, a <dl> is ideal.
<dl>
<dt>Author:</dt>
<dd>Jane Doe</dd>
<dt>Published:</dt>
<dd>October 23, 2025</dd>
<dt>Reading Time:</dt>
<dd>5 min</dd>
</dl>2. Frequently Asked Questions (FAQs)
An FAQ is a perfect example of key-value pairs. The question is the term, and the answer is the description.
<dl>
<dt>What is your return policy?</dt>
<dd>You can return any item within 30 days of purchase.</dd>
<dt>Do you ship internationally?</dt>
<dd>Yes, we ship to over 50 countries.</dd>
</dl>Advanced Grouping Rules
Definition lists are flexible. You aren't limited to a single<dt> for every <dd>.
One Term, Multiple Descriptions
<dl>
<dt>CSS</dt>
<dd>Stands for Cascading Style Sheets.</dd>
<dd>A language for styling web pages.</dd>
</dl>Both <dd> elements describe the single <dt>.
Multiple Terms, One Description
<dl>
<dt>HTML</dt>
<dt>XHTML</dt>
<dd>Are markup languages for the web.</dd>
</dl>The single <dd> describes both preceding <dt>terms.
Common Pitfalls
The structure is strict. The **only** elements allowed as direct children of a <dl> tag are <dt> and <dd> (or a<div> wrapper for grouping).
✔️ Good Practice
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>Simple, semantic, and correct.
❌ Bad Practice
<dl>
<p>This list is for...</p>
<dt>Term</dt>
<dd>Description</dd>
</dl>Invalid HTML. A `<p>` cannot be a direct child of <dl>.
Key Takeaway: If your content consists of key-value pairs, a definition list (<dl>) is almost always the right semantic choice. It improves accessibility and SEO, and with CSS, it can be styled to look however you want.