maxdesign.com.au

Published:

Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

For example:

<dl>
  <dt>Frog</dt>
  <dd>Wet green thing</dd>
  <dt>Rabbit</dt>
  <dd>Warm fluffy thing</dd>
</dl>

You can use multiples of <dt> and <dd> within a definition list:

<dl>
  <dt>Punt</dt>
  <dd>Kick a ball</dd>
  <dd>Take a bet</dd>
</dl>
<dl>
  <dt>Color</dt>
  <dt>Colour</dt>
  <dd>Any hue except white or black</dd>
</dl>

Block level content can also be placed inside the <dt> and <dd> elements.

<dl>
  <dt>Frog</dt>
  <dd>
    <ul>
      <li>Wet</li>
      <li>Green</li>
      <li>Croak</li>
    </ul>
  </dd>
</dl>

When are definition lists appropriate?

There are two points of view about the use of definition lists. Some people believe that definition lists should only be used for terms and definitions. Others believe that definition lists can be used to tie together any items that have a direct relationship with each other (name/value sets). This second point of view is supported by an example within the W3C specifications:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

Lists in HTML documents

Although some people disagree with this example, it does suggest that definition lists can be used for more than simple terms and definitions, as long as there is a direct relationship between the items. Following this arguement, all the examples below could be marked up using definition lists:

DT: Speaker
DD: Quotation
DT: Image
DD: Description
DD: Location
DD: Photographer
DT: Term
DD: Descriptive image
DD: Description
DT: Website (link)
DD: Description
DT: Date
DD: Event
DT: Event
DD: Date
DD: Description
DD: Venue
DT: Internal links
DD: Home
DD: Section 1
DD: Section 2
DT: External links
DD: External link 1
DD: External link 2

Are there downsides of using definition lists?

Before using a definition list, you should be aware that it may not be the best option in every case.

Although definition lists can be styled to look like tabular data, they cannot contain screen reader accessibility features such as “labels” and “headers” to tie information together. For this reason, they should not be used to replace complex tabular data.

Examples of styled definition lists

Other examples and further reading

Translations