DONT ADD ANYTHING HERE!

  1. The dl element represents an association list consisting of zero or more name-value groups (a description list)
  2. Each group must consist of one or more names (dt elements) followed by one or more values (dd elements)
  3. Within a single dl element, there should not be more than one dt element for each name
  4. Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data
  5. The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element
  6. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs)

Example (Basic)

HTML

<dl>
    <dt>Definition Term</dt>
    <dd>definition of term</dd>
</dl>

Browser

Definition Term
definition of term

Example (MDN)

HTML

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature</dd>
</dl>

Browser

Beast of Bodmin
A large feline inhabiting Bodmin Moor
Morgawr
A sea serpent
Owlman
A giant owl-like creature

Example (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>
</dl>

Browser

Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers

Example (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>
</dl>

Browser

Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers

Example (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>
</dl>

Browser

Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers
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)

Example (metadata)

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>

Browser

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green

Notes

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

Mnemonic

Description list: Ltd (dl→dt→dd)

References

MDN: description list element
W3C: dl element
W3C: dt element
W3C: dd element