HTML: Definition List: dl dt dd

By Xah Lee. Date: . Last updated: .

What is definition list

Definition list (aka description list), is a list where each item has a term, followed by one or more definition or description.

dl

definition list.

inside it, should be pairs of:

  • dt (for the term.)
  • dd (for the definition.)
<dl>

<dt>Cat</dt>
<dd>4 Legs. Furry. Cuddly.</dd>

<dt>Octopus</dt>
<dd>8 Tentacles. Smart.</dd>

</dl>
dt

Definition term. For each definition item.

dd

Definition description. May have more than 1 for each dt

Example

Browser shows

Cat
4 Legs. Furry. Cuddly.
Octopus
8 Tentacles. Smart.

Code

<dl>

<dt>Cat</dt>
<dd>4 Legs. Furry. Cuddly.</dd>

<dt>Octopus</dt>
<dd>8 Tentacles. Smart.</dd>

</dl>
dl {
 all: revert;
 border: solid 1px silver;
 border-radius: 16px;
 padding: 8px;
}

dt {
 all: revert;
 border-top: solid thin silver;
 padding-top: 5px;
}

dd {
 all: revert;
}

More Than 1 dd

You can have more than one dd for each dt.

<dl>

<dt>Cat</dt>
<dd>Furry</dd>
<dd>Lovely</dd>

<dt>Octopus</dt>
<dd>Smart</dd>
<dd>Many legs</dd>

</dl>

Browser shows

Cat
Furry
Lovely
Octopus
Smart
Many legs