HTML Guide
The <dl>
element is used in HTML to represent a description list. The element encloses a list of groups of terms (specified using the <dt>
element) and descriptions (provided by <dd>
elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
For example, the following is a description list with a single term and its definition:
<dl>
<dt>Rocket Validator</dt>
<dd>
The fastest site-wide HTML and Accessibility checker.
</dd>
</dl>
Description lists also allow to specify different terms for the same definition, as in this example:
<dl>
<dt>Rocket Validator</dt>
<dt>Rocket</dt>
<dt>RV</dt>
<dd>
The fastest site-wide HTML and Accessibility checker.
</dd>
</dl>
Or, we can have a single term with multiple definitions:
<dl>
<dt>Rocket Validator</dt>
<dd>
The fastest site-wide HTML and Accessibility checker.
</dd>
<dd>
The web site you're browsing right now.
</dd>
</dl>
In all of these cases, a <dt>
term always requires one (or more) <dd>
definition elements, so the following is invalid because it’s incomplete, it has an undefined term:
<dl>
<dt>The Meaning of Life</dt>
</dl>
Learn more:
Related W3C validator issues
The <dl> element, used to create a definition lists that matches some terms with their definitions, has nesting issues related to <div> elements used with it.
The <dl> element, used to create a definition lists that matches some terms with their definitions, is missing a required child element.
The following list will cause this issue, as it’s missing a <dt> to specify the term the given definition refers to:
<dl>
<dd>A box without hinges, key, or lid, yet golden treasure inside is hid.</dd>
</dl>
Fixing the above example is as easy as including the missing <dt> with the term:
<dl>
<dt>Egg</dt>
<dd>A box without hinges, key, or lid, yet golden treasure inside is hid.</dd>
</dl>