W3docs
en
Log in

HTML <dl> Tag

How to create a definition list using the <dl> tag. Description of the tag, attributes and examples.

The <dl> tag defines a list of definitions/descriptions (learn more about HTML lists). It is used with the <dd> and <dt> tags. The <dl> tag creates a list, the <dt> tag specifies the term, and the <dd> tag specifies the description of the term.

Screen readers announce <dl> content differently. Make sure that the content of each list is written in a way that communicates its relationship to the other list items in the group.

If you use microdata or global attributes and want to apply them to an entire group, it can be useful to wrap each name-value group in a <div> element.

It is not recommended to use the <dl> element for simply creating an indentation on a page. It can obscure a description list’s meaning.

To change a description term’s indentation, use the CSS margin property.

The <dl> tag serves as a container for the <dd> and <dt> tags.

Syntax

The <dl> tag comes in pairs. The content is written between the opening (<dl>) and closing (</dl>) tags.

Example of the HTML <dl> tag:

HTML <dl> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>
Try it Yourself »

Result

dl tag example

Attributes

The <dl> tag supports the Global attributes and the Event Attributes.

How to style an HTML <dl> Tag

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Practice

Practice

What is the correct usage of the HTML <dl> tag based on the information provided on w3docs.com?