Description lists

My selfie

James Turner,

Tags: HTML

While I was searching through the bottomless goodie bag that is Ethan Marcotte and Karen McGrane's Responsive Web Design site, I came across a set of HTML elements that were completely new for me: description lists. As described in the Apostrophe angst blog post, they use description lists to mark up the transcribed interviews for the podcast. Here's an example from their interview with the Great Discontent:

<dl>
<dt>Ethan:</dt>
<dd><p>Hi, this is a responsive web design podcast, where we interview the
  people who make responsive designs happen. I’m your host, Ethan
  Marcotte.</p></dd>
<dt>Karen:</dt>
<dd><p>And I’m your other host, Karen McGrane.</p></dd>
<dt>Ethan:</dt>
<dd><p>And this week, well, giddy doesn’t quite cut it to describe just how
  happy we are to be speaking with Ryan Essmaker and Brad Smith from 
  <em>The Great Discontent</em>. Guys, welcome.</p></dd>
...</dl>

I've never before seen a description list in my adventures in web design, so today I want to talk about the three elements, <dl>, <dt> and <dd>, in which situations they should be used, why they should be used, and also whether I can find any other examples in the wild.

Skip to navigation

Uses for description lists

According to the W3C website, the <dl> element is a container for the description list. <dt> is used for the key term, name, headword; in other words, whatever is being described or defined. <dd> contains the description of the preceding key word. Here's how the W3C describe it:

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

There can be a one-to-many relationship between dt elements and dd elements, so you can have more than one term with the same description. The W3C site gives this example, in which there are several values for authors, each with their own <dd> element:

<dl>
  <dt> Authors
  <dd> John
  <dd> Luke
  <dt> Editor
  <dd> Frank
</dl>

There can also be a one-to-many relationship between descriptions and terms. In this example, two dictionary headwords refer to the same thing:

<dl>
  <dt lang="en-US"> <dfn>color</dfn> </dt>
  <dt lang="en-GB"> <dfn>colour</dfn> </dt>
  <dd> A sensation which (in humans) derives from the ability of
  the fine structure of the eye to distinguish three differently
  filtered analyses of a view.</dd>
</dl>

The W3C website gives several examples of correct uses of the dl element, including:

Later, it says that “The <dl> element is inappropriate for marking up dialogue”, which is bad news for RWD. (The W3C site gives some alternative examples of ways to mark up dialogue. For most situations, it suggests the humble <p> element, with <b>, <i> or <span> to mark up the speaker's name.)

Skip to navigation

Why are description lists important?

So, what happens if we mark up a glossary with generic <p> elements, instead of a description list? As well as adding semantic structure to content—which is what we're all aiming for, right?—the W3C Wiki page on definition lists argues that:

This has important benefits such as allowing screen readers to tell users with visual impairments they are reading a list.

If we just use paragraphs, certain readers will not be able to distinguish that what they're reading is in fact a list.

Skip to navigation

Description lists in the wild

I tried searching for some examples of description lists in live websites. My sampling methods are 100% scientifically sound. Seriously. Here's what I found.

People and roles

I tried to look for lists of credits on TV shows, films and games. Some of the websites I looked at include IMDb, BBC (both old and new pages), and Gamewise. Alas, no description lists.

Dictionary definitions

Macmillan Dictionary doesn't use description lists, neither does Merriam-Webster, nor Dictionary.com.

Giving instructions

Food.com nothing. Food network uses a <ul> element for its ingredients, at least, as does BBC Good Food magazine.

Glossaries

I spent half an hour looking for glossaries. I didn't find any marked up with <dl> elements, but I found several that used <div>s, <p>s, <span>s, and so on. One was even marked up with <h2>s for the term and nothing for the description, just text inside the <body> element. What is the world coming to?

Skip to navigation

Conclusion

The example on RWD that triggered this blog post wasn't exactly the correct use for a description list, according to the W3C definition. On the other hand, sites where a <dl> element would be semantically correct prefer non-semantic divs, headings and paragraphs.

So, what does the world have against description lists? The <dl> element certainly isn't deprecated in HTML5. Perhaps the W3C isn't doing a good job of promoting the correct use of less frequent elements. Perhaps web designers, busy people that they are, don't have time to sit and ponder the correct, semantic element to use for their content (doubtful). Either way, I think it's time description lists were given the status they deserve.

Skip to navigation