Definition
The <dl>
tag is used to define a description list. This element encloses a group of description terms (<dt>
) along with their definition description (<dd>
).
Example
<dl>
<dt>HTML</dt>
<dd>HTML is short for Hypertext Markup Language and is the standard markup
language used when creating web pages.</dd>
<dt>HTML Comments</dt>
<dd>HTML comments are comments in your source code inserted using a HTML
comment Tag.</dd>
</dl>
Usage
- The
<dl>
element encloses a group of one or more pairs of terms (<dt>
elements) and definition descriptions (<dd
elements>). These can either be direct children of the<dl>
element or children of a<div>
element child. - Description lists can be used for various purposes, including names and definitions, question and answers, categories and topics, or any term-description pairs.
- A start and closing tag are both required.
Attributes
The <dl>
element only supports the Global Attributes.
Best Practices
- You may want to wrap each pair of
<dt>
and<dd>
tags in a<div>
to aid styling. For example:<dl> <div class="styleMe"> <dt>HTML</dt> <dd>HTML is short for Hypertext Markup Language and is the standard markup language used when creating web pages.</dd> </div> <div class="styleMe"> <dt>HTML Comments</dt> <dd>HTML comments are comments in your source code inserted using a HTML comment Tag.</dd> </div> </dl>
- Try to make the nature of the relationship clear between list items in the group as some screen readers announce each
<dl>
content as a list.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |