HTML - <dl>

The HTML <dl> element (or HTML Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Examples

Single term and description

HTML
<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 definitions -->
</dl>

Output:

Image:HTML-dl1.png

Multiple terms, single description

HTML
<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 definitions -->
</dl>

Output:

Image:HTML-dl2.png

Single term, multiple descriptions

HTML
<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 definitions -->
</dl>

Output:

Image:HTML-dl3.png

Multiple terms and descriptions

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

Metadata

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

HTML
<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 CSS3, such as:

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

Description  

The HTML <dl> element (or HTML Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Prior to HTML5, <dl> was known as a Definition List.

Content categories Flow content, and if the <dl> element's children include one name-value pair, palpable content.
Permitted content Zero or more <dt> elements, each followed by one or more <dd> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parent elements Any element that accepts flow content.
DOM interface HTMLDListElement

Browser Compatibility  

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

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 definition lists.

To change the indention of a description term, use the CSS margin property.

See Also  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/dl

Element HTML HTML grouping content Reference Web