HTML5: The Description List

In this blogpost, I want to address the proper use of the <dl>-Tag in HTML5. <dl> indicates a description list. In the W3C documentation it says:

The dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements).

Still, a lot of webdesigners use the <table>-Tag in order to display a description-list. But remember, tables are meant to be used for data. So for example like this:

Country 2000 2001 2002 2003
USA 10 9 4 5
Germany 9 8 5 8
Country 2000 2001 2002 2003
USA 10 9 4 5
Germany 9 8 5 8

But a description list does not contain “data” but descriptions. As the definition explains, it is a term/description-list. So, if you are interested in semantic web, and as a webdesigner you should be, you should consider this difference. If a bot crawls your page, the dl-Element helps him to understand, this list gives me some explanations about term X, Y, Z…

Specification

The dl element represents a description list. It includes one or more description terms <dt> followed by one or more descriptions or values <dd>.

When to use

For example as a list of definitions, a glossary:

WordPress
WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL, which runs on a web hosting service.
Joomla
Joomla is a free and open-source content management framework (CMS) for publishing web content
WordPress
WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL, which runs on a web hosting service.
Joomla
Joomla is a free and open-source content management framework (CMS) for publishing web content

So, what we do here is:

  1. we start the definition
  2. We declare the term to be defined with <dt>.
  3. We tell explicitly, that we have a definition list here by using <dfn>
  4. We define the term within <dd>

There was some confusion about the description-list-Element. In HTML4 <dl> was defined as a definition list, but it was reframed in HTML 5. So, if you want to have a definition list out of the description list, you should say so by using DFN. This, of course is not a matter of validity, but of semantics.

Another prominent example is to use this list for metadata. For Example:

Name
Godfather
Year
1972
Director
Francis Ford Coppola
Cast
Marlon Brando
Al Pacino
James Caan
Richard S. Castellano
Robert Duvall
Name
Godfather
Year
1972
Director
Francis Ford Coppola
Cast
Marlon Brando
Al Pacino
James Caan
Richard S. Castellano
Robert Duvall

As you can see, a DT-Element can be followed by more than one DD-Element. And vice verca. As MDN points out, you can also use it in this way:

Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

Another example, given by the W3C is a list of contact information:

name:
John Doe
tel:
01-2345678
fax:
02-3456789
email:
johndoe@someemail.com
name:
John Doe
tel:
01-2345678
fax:
02-3456789
email:
johndoe@someemail.com

Some might say “:” is not part of the term, so, a CSS3 solution to this problem would be
dt:after {content: ": ";}

Validation issues

A definition list can’t be placed inbetween tags, when there is flow content expected. So it is not permitted to place a definition list inbetween <p></p> or <blockquote></blockquote> etc. As direct children of DL there are only DT and DD permitted.

Inspired by

This blogpost was inspired by @JonathanTorkes Tweet

and the following reading of How to Use The HTML List Elements

The following two tabs change content below.
Seine erste Webseite hat David Remer 1998 in HTML verfasst. Wenig später war er fasziniert von DHTML und JavaScript. Heute konzentriert sich vor allem auf das Entwickeln von WordPress Themes und Plugins für Inpsyde. Außerdem hat er das Buch "WordPress für Entwickler" verfasst.

Latest posts by David Remer (see all)