<dl>

Published Jun 9, 2022Updated Jul 1, 2022

The <dl> element is a description list that displays terms and details, commonly for metadata purposes.

Syntax

<dl>
  <!-- <dt> terms here -->
  <!-- <dd> details here -->
</dl>

Inside the <dl> element, one or more <dt> and <dd> elements can be used.

Note: For Apple VoiceOver, the <dl> tag will be recognized and announced as a “list” on macOS devices whereas it will not be recognized on iOS devices.

Example

The <dl> tag also supports nesting <dt>-<dd> pairs inside a <div> tag when working with content microdata, global attributes, or general CSS styling.

In the example below, this technique is used inside the <dl> tag. Additionally, some default styling is in place to highlight the list itself:

<!DOCTYPE html>
<html>
  <head>
    <!-- Styles are omitted in this example. -->
  </head>
  <body>
    <dl>
      <div>
        <dt id="term-a" class="term">Aardvark</dt>
        <dd class="detail">
          A large burrowing African mammal that feeds on ants and termites with
          its long sticky tongue.
        </dd>
      </div>

      <div>
        <dt id="term-b" class="term">Aback</dt>
        <dd class="detail">By surprise; suddenly, unaware(s).</dd>
      </div>
    </dl>
  </body>
</html>