Definition lists – misused or misunderstood?

Date: 27 January 2004
Author: Russ Weakley

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

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.

Styled Definition list example 1: Definition list with basic styling

<dl class="margins-removed">
	<dt>Green and Golden Bell Frog</dt>
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
	<dt>Bull Frog</dt>
	<dd>Lorem ipsum dolor sit amet elit...</dd>
	<dt>Spotted frog</dt>
	<dd>Facilisis at vero eros et accumsan</dd>
</dl>
dl.margins-removed
{
	margin: 0;
	padding: 0;
}
	
.margins-removed dt
{
	margin: 0;
	padding: 0;
	font-weight: bold;
}
	
.margins-removed dd
{
	margin: 0 0 1em 0;
	padding: 0;
}

This produces the following result:

Example 1

Styled Definition list example 2: Definition list with background images

<dl class="background-image">
	<dt>Green and Golden Bell Frog</dt>
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
	<dt>Bull Frog</dt>
	<dd>Lorem ipsum dolor sit amet elit...</dd>
	<dt>Spotted frog</dt>
	<dd>Facilisis at vero eros et accumsan</dd>
</dl>
.background-image dt
{
	color: #000;
	font-weight: bold;
	padding: 0;
}
	
.background-image dd
{
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
	background: url(arrow.gif) no-repeat 0 .5em;
}

This produces the following result:

Example 2

Styled Definition list example 3: Definition list as boxes

<dl class="border-around">
	<dt>Green and Golden Bell Frog</dt>
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
	<dt>Bull Frog</dt>
	<dd>Lorem ipsum dolor sit amet elit...</dd>
	<dt>Spotted frog</dt>
	<dd>Facilisis at vero eros et accumsan</dd>
</dl>
dl.border-around
{
	margin: 2em 0;
	padding: 0;
	width: 20em;
}
	
.border-around dt
{
	background-color: #131210;
	color: #959289;
	padding: .5em;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	border-left: 1px solid #131210;
	border-right: 1px solid #131210;
	border-top: 1px solid #131210;
}
	
.border-around dd
{
	margin: 0 0 1em 0;
	background: #DBD8D8;
	text-align: center;
	padding: 1em .5em;
	font-style: italic;
	border-left: 1px solid #131210;
	border-right: 1px solid #131210;
	border-bottom: 1px solid #131210;
}

This produces the following result:

Example 3

Styled Definition list example 4: Styling a definition list to look like a table

<dl class="table-display">
	<dt>Green and Golden Bell Frog</dt>
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
	<dt>Bull Frog</dt>
	<dd>Lorem ipsum dolor sit amet elit...</dd>
	<dt>Spotted frog</dt>
	<dd>Facilisis at vero eros et accumsan</dd>
</dl>
dl.table-display
{
	float: left;
	width: 520px;
	margin: 1em 0;
	padding: 0;
	border-bottom: 1px solid #999;
}
	
.table-display dt
{
	clear: left;
	float: left;
	width: 200px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-weight: bold;
}
	
.table-display dd
{
	float: left;
	width: 300px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
}

This produces the following result:

Example 4

Styled Definition list example 5: Styling a definition list to look an floating image/description

<dl class="float-right">
	<dt>Banksia flower</dt>
	<dd><img src="flower.jpg" alt=""></dd>
	<dd><em>Banksius maximus</em></dd>
	<dd>Found off the coast of Australia</dd>
</dl>
dl.float-right
{
	border: 1px solid #000;
	background-color: #ddd;
	width: 142px;
	text-align: center;
	padding: 0 0 10px 0;
	float: right;
	margin: 0 0 1em 1em;
}

.float-right dt
{
	font-weight: bold;
	background-color: #131210;
	color: #959289;
	padding: 5px 10px;
	margin-bottom: 10px;
}

.float-right dd img
{
	border: 1px solid #000;
	width: 100px;
	height: 100px;
}

.float-right dd
{
	margin: 0;
	padding: 0 10px 5px 10px;
	font-size: 85%;
}

This produces the following result:

Example 5

Styled Definition list example 6: Styling a definition list to look an image gallery

<dl class="gallery">
	<dt><img src="flower.jpg" alt=""></dt>
	<dt>Title here</dt>
	<dd>Description here</dd>
</dl>
<dl class="gallery">
	<dt><img src="flower2.jpg" alt=""></dt>
	<dt>Title here</dt>
	<dd>Description here</dd>
</dl>
<dl class="gallery">
	<dt><img src="flower3.jpg" alt=""></dt>
	<dt>Title here</dt>
	<dd>Description here</dd>
</dl>
dl.gallery
{
	border: 1px solid #000;
	background-color: #ddd;
	width: 102px;
	text-align: center;
	padding: 10px;
	float: left;
	margin-right: 1em;
}

.gallery dt { font-weight: bold; }

.gallery dt img
{
	border: 1px solid #000;
	width: 100px;
	height: 100px;
}

.gallery dd
{
	margin: 0;
	padding: 0;
}

This produces the following result:

Example 6

Styled Definition list example 7: Styling a definition list to look a calendar of events

<dl class="event">
	<dt>23 March</dt>
	<dd>Car club meeting</dd>
	<dd>7pm</dd>
	<dd>See a wide range of classic cars on display... </dd>
	<dt>13 June</dt>
	<dd>Cake stall</dd>
	<dd>12pm</dd>
	<dd>Cakes of every type. All proceeds go to the... </dd>
</dl>
dl.event
{
	margin: 2em 0;
	padding: 0;
	font-family: georgia, times, serif;
}
	
.event dt
{
	position: relative;
	left: 0;
	top: 1.1em;
	width: 5em;
	font-weight: bold;
}
	
.event dd
{
	border-left: 1px solid #000;
	margin: 0 0 0 6em;
	padding: 0 0 .5em .5em;
}

This produces the following result:

Example 7

Styled Definition list example 8 – Styling a definition list to look like a table with multiple dd’s

<dl>
	<dt>Green and Golden Bell Frog</dt>
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
	<dt>Bull Frog</dt>
	<dd>Lorem ipsum dolor sit amet elit...</dd>
	<dt>Spotted frog</dt>
	<dd>Facilisis at vero eros et accumsan</dd>
</dl>
dl.multiple-table { border-bottom: 1px solid #999; }
	
dl.multiple-table dt
{
	clear: left;
	float: left;
	width: 220px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-weight: bold;
}

dl.multiple-table dd
{
	margin-left: 230px;
	padding: 5px;
}

dl.multiple-table dd.first { border-top: 1px solid #999; }

This produces the following result:

Example 8

Other examples and further reading

Translations

Comments so far

  1. [...] Html Definition lists – misused or misunderstood? | Max Design …What are definition lists? When are they appropriate? And how to style them to look like tables, image galleries, calendar of events and more. (tags: dev web html css design) [...]

  2. John Snow says:

    As an addendum to Style #8, you don’t need a special class (dd.first) for the first definition in a pair of multiples. You can use something like this instead:

    dt+dd { border-top: 1px solid #999; }

    which will add the style to the first dd that immediately follows any dt. A good way to style existing lists without changing the html; and it also cuts down on using extraneous classes.

  3. Russ says:

    @John Snow: you are correct. Instead of using a class, I could have used an adjacent sibling selector.

    However, this will not work for earlier versions of IE including 5 and 6.

    (IE6 is more prevalent that some people think – such as Government and large organisations that have locked staff down to IE6).

    Also, this article was written in 2004 when there was no IE7, let alone IE8, so using adjacent sibling selectors at that time, though desirable, was hardly practical if you wanted cross-browser support.

    Thanks
    Russ

  4. Thanks, just what I was looking for. Particularly table look style. (Surprising to find an article still relevant six years later!)

    One thing though, list example 8 doesn’t show multiple dd’s and looks the same as number 4 (although different css)

    T

  5. Ada says:

    Very good article, useful and precise.

    A big thanks.

    Ada

  6. Bessie Davidson says:

    Hi. You said “Google and other search engines will not index definition list content in the same way that they do for heading-based content”. Can you back that up? I haven’t been able to confirm that. What exactly does “not in the same way” mean? (I guess it must mean something different from simply “not”).

  7. Hi Russ!
    I’ve just made this:

    http://onwebdev.blogspot.com/2010/06/image-gallery-with-definition-list-and.html

    This is something not without some semantic implications. bye :-)

  8. [...] on this, I used a Definition List to write down my personal [...]

  9. Very helpful post…