HTML5 <dl> Tag

The HTML <dl> tag is used to enclose a list of groups of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

The only content permitted inside this element is zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.

Both the starting and ending tag are mandatory for this element. The parent of the <dl> tag can be any element that accepts flow content.

Do not use this element (nor <ul> elements) to merely create indention on a page. Although it works, this is a bad practice and obscures the meaning of description lists. To change the indention of a description term, use the CSS margin property.

The following style is applied to this element by default:

dl {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
}

Here is an example of using this tag:

<dl>
  <dt lang="en-US"> <dfn>color</dfn> </dt>
  <dt lang="en-GB"> <dfn>colour</dfn> </dt>
  <dd> The property possessed by an object of producing different sensations on the eye as a result of the way it reflects or emits light. </dd>
</dl>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML dl Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <dl> element on MDN.
  2. You can also read the HTML <dl> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top