dl (HTML element)

Description

If you want to list a series of items that essentially have a title and a description of some kind (that is, each item has two parts), use the definition list dl element. This element usually contains a series of single definition term (dt) and its associated definition description (dd) pairings (I say usually, because it’s perfectly acceptable to have multiple dt elements followed by one dd, one dt element followed by multiple dd elements, or any other permutation you choose to conjure up!).

A simple definition list would display as illustrated in Figure 1.

Figure 1. A description list of spam

You can also nest definition lists, as the example below shows:

<dl>
 <dt>Spam</dt>
 <dd>unsolicited email sent in the hope of increasing sales of some
     product, or simply for the purposes of annoying people
  <dl>
   <dt>Spammer</dt>
   <dd>someone who sends out spam email and therefore deserves to
       develop a nasty incurable disease of some kind</dd>
   <dt>Spam Filter</dt>
   <dd>a tool used in email to 'filter out' likely spam messages,
       usually placing them in a dedicated junk messages folder
       or similar</dd>
  </dl>
 </dd>
</dl>

Without any CSS styles applied, this code would render as shown in Figure 2.

Figure 2. A nested definition list

Use This For …

Typical uses (and hence values) for definition lists include:

• glossaries, such as the example shown above (term: definition)
• event listing (title of event: description of event)
• web site directory (web site name with link: description of web site)

Some people use definition lists for the purposes of marking up dialogues (using dt to denote the speakers, and dd for the words they say). This approach has come straight from the horse’s mouth—the W3C HTML recommendation states that "Another application of dl is for marking up dialogs"—but many people argue that it represents bad practice and is somewhat misguided. You may see definitions lists used in this way, but arguably you shouldn’t use them for this purpose, despite what the W3C says, because they’re designed to mark up lists of definitions.

Compatibility

Every browser listed supports this element type.