HTML5: The Description List
2014
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:
- we start the definition
- We declare the term to be defined with <dt>.
- We tell explicitly, that we have a definition list here by using <dfn>
- 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
How to Use The #HTML List Elements – http://t.co/lKQxSy0l6V #CSS
— Jonathan Torke (@JonathanTorke) 4. März 2014
and the following reading of How to Use The HTML List Elements
