Definition lists - misused or misunderstood

Russ Weakley
27-Jan-04

What are definition lists?

When are they appropriate? And how to style them to look like tables, image galleries, calendar of events and more.

What are definition lists?

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>Color</dt>
<dt>Colour</dt>
<dd>Any hue except white or black</dd>
</dl>

You can also use block level elements in the definition description, such as the <p> and <ul> elements. You cannot use block level elements inside a definition term.

<dl>
<dt>Frog</dt>
<dd><p>Wet green thing that croaks.</p></dd>
</dl>

<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.

The <dt> within definition lists cannot contain block level elements – particularly the <hn> element. If content within a <dt> cannot be flagged as a heading, it cannot be given “heading” importance within the document hierarchy. Also, Google and other search engines will not index definition list content in the same way that they do for heading-based content.

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.

Style definition lists
Here are a range of ways that definition lists can be styled:

Definition list with no style applied
Definition list with basic styling
Definition list with background images
Definition list as boxes
Styling a definition list to look like a table
Styling a definition list to look an floating image/description
Styling a definition list to look an image gallery
Styling a definition list to look a calendar of events
Styling a definition list to look like a table with multiple dd's
Other examples and further reading

Les listes de dèfinitions : mal utilisèes ou mal comprises ?
Simian Design - Style Definition Lists
Seamus Leahy - Sensually Styled Definition Lists
Terry Melanson - Definition List
SimpleQuiz - Part XI - Image Floating
Doug Bowman on definition lists
Definition : a definition and an analysis
HTML 4.01 Specification - Definition lists
David House's excellent example