**`<dl>`** groups pairs of **`<dt>`** (the term being defined) and **`<dd>`** (its definition/description), and browsers indent the `<dd>` by default to visually associate it with the term above. It's the correct semantic choice for glossaries, FAQ lists, metadata (key-value pairs like 'Author: Jane Doe'), or any content structured as 'label, then its value' — a role that plain `<ul>`/`<li>` doesn't capture as precisely.
1Understanding <dl>
`<dl>` groups pairs of `<dt>` (the term being defined) and `<dd>` (its definition/description), and browsers indent the <dd> by default to visually associate it with the term above. It's the correct semantic choice for glossaries, FAQ lists, metadata (key-value pairs like 'Author: Jane Doe'), or any content structured as 'label, then its value' — a role that plain <ul>/<li> doesn't capture as precisely.
A single <dt> can be followed by multiple <dd> elements if a term has more than one description, and multiple <dt> terms can share one <dd> if they mean the same thing.
<dl>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dt>DOM</dt>
<dd>Document Object Model</dd>
</dl>2Practical Example
Here is a real-world application of <dl> showing how it is used in production HTML.
<!-- FAQ built with a description list -->
<dl>
<dt>Is this course free?</dt>
<dd>Yes, all core lessons are free to access.</dd>
</dl>3Best Practices
Follow these guidelines when working with <dl>:
1. Use <dl> for genuine term/description pairs — glossaries, FAQs, key-value metadata
2. Don't use <dl> as a generic two-column layout tool with no real term/definition relationship
3. Pair every <dt> with at least one <dd>
Tip: A single <dt> can be followed by multiple <dd> elements if a term has more than one description, and multiple <dt> terms can share one <dd> if they mean the same thing.
<dl>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dt>DOM</dt>
<dd>Document Object Model</dd>
</dl>