W3cubDocs

/HTML

<dl>

The HTML <dl> element encloses 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).

Content categories Flow content, and if the <dl> element's children include one name-value group, palpable content.
Permitted content 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.
Or (in WHATWG HTML): One or more <div> elements, optionally intermixed with <script> and <template> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles group, presentation
DOM interface HTMLDListElement

Attributes

This element's attributes include the global attributes.

compact non standard
Forces the description to appear on the same line as the term. This attribute is currently unsupported

Examples

Single term and description

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform,
      graphical web browser developed by the
      Mozilla Corporation and hundreds of
      volunteers.</dd>

  <!-- other terms and descriptions -->
</dl>

Output:

Image:HTML-dl1.png

Multiple terms, single description

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform,
      graphical web browser developed by the
      Mozilla Corporation and hundreds of
      volunteers.</dd>

  <!-- other terms and descriptions -->
</dl>

Output:

Image:HTML-dl2.png

Single term, multiple descriptions

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform,
      graphical web browser developed by the
      Mozilla Corporation and hundreds of
      volunteers.</dd>
  <dd>The Red Panda also known as the Lesser
      Panda, Wah, Bear Cat or Firefox, is a
      mostly herbivorous mammal, slightly larger
      than a domestic cat (60 cm long).</dd>

  <!-- other terms and descriptions -->
</dl>

Output:

Image:HTML-dl3.png

Multiple terms and descriptions

It is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above.

Metadata

Description lists are useful for displaying metadata as a list of key-value pairs.

<dl>
  <dt>Name</dt>    
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Tip: It can be handy to define a key-value seperator in the CSS, such as:

dt::after {
  content: ": ";
}

Wrapping name-value groups in <div> elements

WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.

<dl>
  <div>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Notes

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.

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of '<dl>' in that specification.
Living Standard
HTML5
The definition of '<dl>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<dl>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl