Description list
Description lists pair names and values using <dl>, <dt>, and <dd>. They are useful for metadata, glossaries, and compact record summaries.
Overview
Description lists pair names and values using <dl>, <dt>, and <dd>. They are useful for metadata, glossaries, and compact record summaries.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| DOM API | ||||||
| The HTMLDListElement interface provides special properties (beyond those of the regular HTMLElement interface it also has available to it by inheritance) for manipulating definition list (dl) elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| Other | ||||||
| The HTML element represents a description list. The element encloses a list of groups of terms (specified using the dt element) and descriptions (provided by dd elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The HTML element specifies a term in a description or definition list, and as such must be used inside a dl element. It is usually followed by a dd element; however, multiple elements in a row indicate several terms that are all defined by the immediate next dd element. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
- Before Firefox 4, this element was implemented using the `HTMLSpanElement` interface instead of `HTMLElement`.
Syntax
<dl>
<dt>HTML</dt>
<dd>A markup language used to define the structure of web pages</dd>
<dt>CSS</dt>
<dd>A stylesheet language that defines the appearance of web pages</dd>
</dl>Live demo
horizontalarrangementlayout
Dt and dd horizontalarrangement to placement. with CSS Grid
Use cases
Profile metadata
Display labels such as Name, Role, or Status next to their values in a compact semantic structure.
Glossaries and definitions
Pair terms with explanations in documentation, FAQs, or support content.
Cautions
- Use description lists for term-value relationships, not as a replacement for arbitrary layout grids.
- Very dense or cross-comparable data may still be clearer in a table.
Accessibility
- Description lists can work well for metadata summaries when the term-value relationship is kept explicit and consistent.
Related links
Powered by web-features