<dl>

The <dl> tag 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> 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.

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>

The rendered output is shown below:

Example of d l tag

Edit this page on GitHub

Contributors

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

Learn HTML on Codecademy