HTML - <dl>

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:

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:

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:

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: ": ";
}