<dl>
The <dl> element represents a description list (formerly called a definition list). It consists of groups of terms (<dt>) and their associated descriptions (<dd>). This element is ideal for glossaries, metadata displays, question-answer pairs, and any content where you need to associate names with values.
This page was last updated on 2025-11-27
Syntax
<dl>
<dt>Term</dt>
<dd>Description of the term</dd>
</dl>
Attributes
- class - CSS class name for styling
- id - Unique identifier for the element
- style - Inline CSS styles
- title - Advisory information (tooltip)
- lang - Language of the content
- dir - Text direction (ltr or rtl)
Examples
Basic glossary:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard markup language for web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style HTML elements.</dd>
<dt>JavaScript</dt>
<dd>A programming language that enables interactive web pages.</dd>
</dl>
Multiple terms with one description:
<dl>
<dt>Author</dt>
<dt>Writer</dt>
<dd>A person who writes books, articles, or other text.</dd>
</dl>
Metadata display:
<dl>
<dt>Published</dt>
<dd>January 15, 2024</dd>
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Category</dt>
<dd>Web Development</dd>
<dd>Tutorials</dd>
</dl>
When to Use
Use the <dl> element when you need to present information as name-value or term-description pairs. Common use cases include glossaries, dictionaries, FAQ sections, product specifications, file metadata, and contact information displays. The description list provides semantic meaning that helps both browsers and screen readers understand the relationship between terms and their descriptions.
A description list can have multiple <dt> elements followed by a single <dd>, or a single <dt> followed by multiple <dd> elements, making it flexible for various content structures. Do not use <dl> purely for visual indentation; use CSS for styling purposes instead.
