Learn how to structure term-definition pairs and label-value data using HTML description lists.
What it is
A description list (<dl>) is a semantic HTML element used to group terms with their corresponding descriptions or values. It consists of two child elements: <dt> (description term) for the label or key, and <dd> (description detail) for the value or definition. Unlike unordered lists, which imply equal weight among items, description lists explicitly associate a specific label with its content, making them ideal for glossaries, metadata, and form-like data displays.
Why it matters
- Semantic clarity: Screen readers announce the relationship between the term and the detail, improving accessibility.
- Structural grouping: Multiple
<dd>elements can follow a single<dt>, allowing one term to have several definitions or values. - CSS styling efficiency: You can style labels and values differently without adding extra wrapper divs or classes.
- Data presentation: Perfectly suited for displaying key-value pairs like product specifications or user profiles.
Syntax or steps
The basic structure requires a parent <dl> containing alternating <dt> and <dd> tags. While you can nest multiple <div> elements inside <dl> for layout purposes in modern HTML5, the fundamental semantic unit remains the term-detail pair.
Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets.</dd>
<dd>Used for visual presentation.</dd>
</dl>In this example, "HTML" is the term defined by one detail. "CSS" is the term defined by two separate details, demonstrating that a single term can map to multiple values. The browser renders these with indentation for the <dd> elements by default.
Common mistakes
- Using
<ul>for key-value data: This loses the semantic link between the label and the value. Use<dl>instead. - Missing closing tags: Always close
<dt>and<dd>explicitly to ensure consistent parsing across browsers. - Nesting invalid elements: Do not place block-level elements like
<p>directly inside<dt>. Keep terms concise. - Ignoring multiple details: Developers often forget that one
<dt>can legitimately precede multiple<dd>elements.
When to use it
| Scenario | Recommended Element | Reason |
|---|---|---|
| Glossary or FAQ | <dl> |
Explicitly links question/term to answer/definition. |
| Simple bullet points | <ul> |
No inherent label-value relationship exists. |
| Numbered steps | <ol> |
Order is critical; no distinct labels needed. |
Practice
Guided Exercise: Create a description list for a book's metadata. Include the Title, Author, and ISBN as terms, with their respective values as details.
Challenge: Modify your code so that the "Author" term has two details: one for the name and one for the birth year. Verify that both details are visually associated with the same author term.
Quick check
Question: Can a single <dt> element be followed by more than one <dd> element?
Answer: Yes, this is valid HTML and semantically correct when a term has multiple definitions or attributes.
Summary
Description lists provide a robust way to present labeled data where the relationship between the label and the content is crucial. By using <dl>, <dt>, and <dd>, you enhance accessibility and maintain clean, semantic markup for key-value structures.