HTML: Definition List: dl dt dd

By Xah Lee. Date: . Last updated: .

What is definition list

Definition list (or 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.

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>

Example

Browser shows

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

Code

<div>
<style>@scope {
 dl {
  all: revert;
  border: solid 1px silver;
  padding: 8px;
 }

 dt {
  all: revert;
  color: red;
 }

 dd {
  all: revert;
  color: green;
 }
}</style>

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

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