🌱BeginnerLists
Description Lists
Create term-definition pairs with <dl>, <dt>, and <dd> for glossaries and metadata.
Overview
A description list (<dl>) is a specialized list for associating terms with their descriptions like a dictionary, FAQ, metadata display, or key-value pairs. It has a distinct three-part structure:
- <dl>: the description list container
- <dt>: the term (definition term)
- <dd>: the description/definition of the preceding term
A single term can have multiple descriptions, and a single description can apply to multiple terms. Description lists are less common than <ul> and <ol> but are the correct semantic choice for glossaries and structured key-value data.
Key Points
- •<dl> contains pairs of <dt> (term) and <dd> (description)
- •One <dt> can have multiple <dd> elements; multiple <dt> can share a single <dd>
- •Browsers indent <dd> by default to visually associate it with the preceding <dt>
- •Use <dl> for glossaries, FAQs, metadata, and key-value displays
- •<dt> and <dd> are both block elements
- •In HTML5, <dl> can also contain <div> wrappers around dt/dd groups for styling
Examples
A simple glossary
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language the standard for structuring web content.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets controls the visual presentation of HTML.</dd>
<dt>JavaScript</dt>
<dd>A scripting language that adds interactivity to web pages.</dd>
</dl>One term with multiple descriptions
<dl>
<dt>Open Source</dt>
<dd>Software whose source code is publicly available.</dd>
<dd>Free to use, modify, and distribute under an open license.</dd>
</dl>Metadata display (article info)
<dl>
<dt>Author</dt>
<dd>Jane Doe</dd>
<dt>Published</dt>
<dd><time datetime="2024-06-01">June 1, 2024</time></dd>
<dt>Tags</dt>
<dd>HTML, CSS, Web Development</dd>
</dl><dl> is semantically correct for article metadata key-value pairs.
Common Mistakes
- Placing <dt> or <dd> directly inside a <div> without a wrapping <dl>
- Using <dl> as a general-purpose layout tool it is semantic for term-definition pairs
- Putting block elements like <p> as a sibling of <dt>/<dd> directly in <dl> (wrap in <div> if needed)
Note
Use <dl> for FAQ sections each question is a <dt> and the answer is a <dd>. This is semantically more correct than using <h3> + <p> pairs for Q&A content.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4