<dl>

This article is in need of a technical review.

Summary

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

Attributes

This element includes the global attributes.

compact
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 definitions -->
</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 definitions -->
</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 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.

<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: dt:after {content": ";}

 

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.

Specifications

Specification Status Comment
WHATWG HTML Living Standard Living Standard  
HTML5 Candidate Recommendation  
HTML 4.01 Specification Recommendation  

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)

See also

Attachments

File Size Date Attached by
HTML-dl1.png
1767 bytes 2006-08-06 16:02:04 PablO
HTML-dl2.png
2207 bytes 2006-08-06 16:03:02 PablO
HTML-dl3.png
3430 bytes 2006-08-06 16:04:04 PablO
Canvas_moon.png
278 bytes 2005-11-15 21:24:45 KamielMartinet
Canvas_picture_frame.png
32212 bytes 2005-09-16 18:37:08 KamielMartinet
Canvas_quadratic.png
2924 bytes 2005-09-20 18:35:07 KamielMartinet

Document Tags and Contributors

Last updated by: KyliRouge,