Definition
The <dt>
tag is used to display the definition term alongside a definition description (<dd>
) in a definition list (<dl>
).
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
<dt>
can be used after either<dt>
or<dd>
elements that fall within a<dl>
element. - It can also be used after either
<dt>
or<dd>
elements that fall within a<div>
element that is a child of a<dl>
element. - A start tag is required.
- The end tag may be omitted if the
<dt>
element is immediately followed by another<dd>
or<dt>
element. - When used with a
<dl>
element, the<dt>
element does not necessarily represent the term being defined. For this, you should use<dfn>
. - Multiple defined terms (
<dt>
elements) may be represented by a singular definition description (<dd>
). For example:<dl> <dt lang="en-us"><dfn>Color</dfn></dt> <dt lang="en-gb"><dfn>Colour</dfn></dt> <dd>The ability to derive a visual sensation arising from an analysis of three different filtered views.</dd> </dl>
Attributes
The <dt>
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 |