HTML Guide for dl

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>

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>