HTML Tags
HTML <dl> Tag
The
<dl>tag in HTML defines a description list (also known as a definition list).
Each description list contains one or more pairs of terms (<dt>) and definitions (<dd>).
It is commonly used to display glossaries, FAQs, or metadata in a structured way.
Syntax
html
<dl>
<dt>Term 1</dt>
<dd>Description of Term 1</dd>
<dt>Term 2</dt>
<dd>Description of Term 2</dd>
</dl>Attributes
| Tag | Attribute | Description |
|---|---|---|
<dl> | Global Attributes | Supports all global attributes such as id, class, title, and style. |
<dt> | Global Attributes | Can use class, id, title, etc. |
<dd> | Global Attributes | Can use class, id, title, and style attributes. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Description List Example</title>
<style>
dl {
padding: 15px;
width: 320px;
}
dt {
font-weight: bold;
color: #222;
margin-top: 10px;
}
dd {
margin-left: 20px;
color: #555;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>HTML Terminology</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language – the standard language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets – used to style and layout web pages.</dd>
<dt>JavaScript</dt>
<dd>A scripting language used to create dynamic and interactive effects on web pages.</dd>
</dl>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <dl>, <dt>, and <dd> tags have full browser support across all modern browsers.
Use our Try It Editor to see how terms and descriptions align differently based on your styling.
Notes
<dl>wraps the entire list,<dt>defines the term, and<dd>defines the description.- You can include multiple
<dd>elements for one<dt>to provide more details. - Description lists are ideal for FAQs, glossaries, or attribute-value data.
- Style them using CSS to create elegant layouts like two-column descriptions.
Conclusion
The <dl>, <dt>, and <dd> tags provide a semantic way to represent term–definition pairs.
They are perfect for glossaries, FAQs, and structured data lists.
With proper CSS styling, description lists can be made visually appealing and easy to read.