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


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

Inside the <dl> tag, one or more <dt> and <dd> tags 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.


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>
<!-- Styles are omitted in this example. -->
<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.
<dt id="term-b" class="term">Aback</dt>
<dd class="detail">By surprise; suddenly, unaware(s).</dd>

The rendered output is shown below:

Example of d l tag

Edit this page on GitHub


Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn HTML on Codecademy