What Are Description Lists, and When Should You Use Them?

Description lists (marked up with the HTML <dl> element) are used to create associations between terms and their corresponding descriptions. Unlike unordered (<ul>) or ordered (<ol>) lists, which contain simple lists of items, description lists are designed for key-value pairs.

How they work

A description list consists of three primary HTML tags:

• <dl>: The wrapper element that defines the entire description list.
• <dt>: The “description term”—the key or item you are defining or describing.
• <dd>: The “description details”—the definition, explanation, or value associated with the term.

When to use them

You should use a description list whenever you have content that is inherently structured as pairs of terms and their related information. Common use cases include:

• Glossaries: A classic use case where you list a technical term (<dt>) and provide its definition (<dd>).
• Metadata or Key-Value Pairs: Displaying data such as “Author: Jane Doe,” “Date: April 27, 2026,” or “Status: Active.”
• Frequently Asked Questions (FAQs): The question acts as the term (<dt>), and the answer acts as the description (<dd>).
• Product Details: Displaying specifications like “Material: Cotton,” “Origin: Italy,” etc.

Why use them?

• Semantic Meaning: Using the correct HTML tags tells browsers and assistive technologies (like screen readers) exactly what the content is. Screen readers can announce the relationship between the term and the description, improving accessibility for users.
• Readability: They provide a clean, organized way to present related information in your code, making it easier for developers to maintain.
• Flexibility: While traditionally used for definitions, the HTML5 specification defines them broadly as “an association list,” making them appropriate for any grouped name-value data.