The HTML <dl> element represents a “description list”. It’s used to present a list of terms and their corresponding descriptions or definitions. You’ll see the <dl> element used for glossaries, metadata, or any situation requiring a list of terms and their explanations.
Syntax
The <dl> element wraps one or more <dt> (term) elements followed by their corresponding <dd> (description) elements:
1 |
<dl>
|
2 |
<dt>Term 1</dt> |
3 |
<dd>Description 1</dd> |
4 |
<dt>Term 2</dt> |
5 |
<dd>Description 2</dd> |
6 |
<!-- More terms and descriptions -->
|
7 |
</dl>
|
Example
Here’s an example of a simple glossary created using the <dl> element:
Attributes
The <dl> element does not have any specific attributes, however, it does inherit from global attributes defined in HTML.
Content
The <dl> element accepts the following content:
-
<dt>(term): Represents the term or label. -
<dd>(description): Represents the corresponding description or definition for the term.
Did You Know?
- The order of
<dt>and<dd>elements within a<dl>does not matter. Browsers usually render them in the order they appear in the HTML, but their visual styling can be modified using CSS.