HTML Description List: <dl>, <dt> and <dd>
The HTML <dl> element represents a description list: a series of terms or names marked with <dt> and their descriptions or values marked with <dd>. It is useful for glossaries, metadata, name-value pairs and other associated information.
A description list is broader than a dictionary-style "definition list." The term and description can represent any meaningful name-value relationship.
<dl>
<dt>HTML</dt>
<dd>A markup language used to structure web content.</dd>
<dt>CSS</dt>
<dd>A style sheet language used to present web content.</dd>
</dl>Rendered result:
- HTML
- A markup language used to structure web content.
- CSS
- A style sheet language used to present web content.
How <dl>, <dt> and <dd> Work Top ↑
<dl>contains one or more groups of terms and descriptions.<dt>identifies a term or name.<dd>supplies the description, definition or value associated with the preceding term or terms.
<dt> and <dd> are normally siblings inside <dl>. A <dd> is not a child of <dt>.One Term with Multiple Descriptions Top ↑
A single term can be followed by more than one description.
<dl>
<dt>HTML</dt>
<dd>Structures content on a web page.</dd>
<dd>Works with CSS and JavaScript in the browser.</dd>
</dl>Multiple Terms with One Description Top ↑
Multiple <dt> elements can share the description that follows them. This is useful for aliases or equivalent names.
<dl>
<dt>JS</dt>
<dt>JavaScript</dt>
<dd>A programming language commonly used for web-page behavior.</dd>
</dl>Grouping Name-Value Pairs with <div> Top ↑
Modern HTML also allows each term-description group inside a <dl> to be wrapped in a <div>. This can make styling or applying attributes to a whole group easier.
<dl>
<div>
<dt>Name</dt>
<dd>Ravi</dd>
</div>
<div>
<dt>Role</dt>
<dd>Web developer</dd>
</div>
</dl>Practical Uses of Description Lists Top ↑
Description lists work well when the content naturally consists of names and associated values.
Metadata or Key-Value Information Top ↑
<dl>
<dt>Course</dt>
<dd>HTML Basics</dd>
<dt>Level</dt>
<dd>Beginner</dd>
<dt>Format</dt>
<dd>Online tutorial</dd>
</dl>Descriptions with Longer Content Top ↑
- By rail
- Use the nearest railway station and provide the distance or connection details.
- By road
- Describe the main road or highway connection.
- By air
- Give the nearest airport and onward travel information.
A <dd> can contain normal flow content such as paragraphs, links and lists when a longer description is needed.
Styling a Description List with CSS Top ↑
Use CSS for spacing, colors and layout. Do not use a description list merely because its browser default indentation looks useful.
Demo of HTML Description List with Style<style>
dl.details {
display: grid;
grid-template-columns: minmax(8rem, 1fr) 2fr;
gap: 0.75rem 1rem;
}
dl.details dt {
font-weight: 700;
}
dl.details dd {
margin: 0;
}
</style>
<dl class="details">
<dt>Language</dt>
<dd>HTML</dd>
<dt>Purpose</dt>
<dd>Structure web content</dd>
</dl>A responsive layout should allow the description content to remain readable on narrow screens. If a two-column layout becomes cramped, switch to a single-column layout with a media query rather than assigning a fixed pixel width.
Semantic and Accessibility Guidance Top ↑
- Use
<dl>when the content genuinely contains associated names and values. - Do not use it only to indent text. Use CSS margins or padding for visual indentation.
- Use a real HTML table when the information is genuinely tabular and users need row-and-column relationships.
- Use ordered or unordered lists when the content is simply a sequence or collection of items.
- Do not add ARIA roles to a normal description list unless there is a specific tested reason. Native HTML semantics are usually preferable.
Common Description List Mistakes Top ↑
Putting <dd> Inside <dt> Top ↑
A description is not nested inside its term. Place <dt> and <dd> as sibling elements within the same description-list group.
Assuming Every <dl> Must Be a Dictionary Top ↑
Description lists can represent glossaries, metadata, questions and answers, labels and values, or other name-value associations.
Using <dl> Only for Indentation Top ↑
The browser's default indentation is presentation, not the reason to choose this element. Use CSS for layout.
Using Fixed Widths for the Styled List Top ↑
A fixed width such as 500px can cause problems on small screens. Prefer flexible units and responsive CSS.
Related HTML List Tutorials Top ↑
Frequently Asked Questions Top ↑
The <dl> element represents a description list containing groups of terms or names and their associated descriptions or values.
<dt> provides the term or name, while <dd> provides the associated description, definition or value.
Yes. A single term can be followed by multiple descriptions when each one adds a separate value or explanation for that term.
Yes. Consecutive <dt> elements can represent multiple names or terms associated with the following description.
No. It can also represent metadata, key-value information, questions and answers, or other name-value associations.
No. Use a description list for meaningful name-value relationships and use CSS when you only need visual spacing or indentation.
HTML Lists Ordered List Unordered List
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
