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

Tweet Comment: Did you know, jQuery is able to…?

@prantor19 just twittered a list of useful jQuery Snippets for 2014:

Well, I’m not to sure about some of these snippets. Sometimes, I think, you should CSS like for example:
$('li:odd').css('background-color: #000');

I just don’t get it, why you cant just use CSS
li:nth-child(2n){background-color:#000;}

Well, there might be some reasons, why you have to use Javascript instead, but a Rocking Script as it says in the Title “Rocking and Useful jQuery Code Snippets For 2014”?

There are some others too, which would fit more into a title “Did you know, jQuery is able to…?“.

$('input [type="submit"]').attr('disabled', true);
Yes! With jQuery you can alter attributes!

Well really, what is so rocking about
var anchor = $('#anchor');
setTimeout(function() {
anchor.removeClass('current');
}, 3000);

???

So, despite the strange title, which really hasn’t proven for me, I do like this one:

$('img').error(function() {
$(this).attr('src', 'img/not_found.png');
});


$('img').load(function() {
console.log('images successfully loaded');
});

Its quite obvious, when you see it, but I haven’t thought about this possibility yet. Why should the load-function just work with window?? I will try this one for sure!

And this one here
$("p:not(:last-of-type)").after("
");

is quite nice to investigate further. As the jQuery Docs explain “Insert content, specified by the parameter, after each element in the set of matched elements”. So this piece of code puts a break between all &lt,p>-Tags, but not behing the last one, because :not(:last-of-type) I like this usage of the selectors and once again it shows the power of them.

Thanks for the Tweet!

Hello world!

Hi,

my name is David and I am working as a Freelancer for WordPress applications. Since more than a year, I am thinking of starting a blog concerning WP, HTML, Javascript and so on. And finally, I did set up my own blog.

I develop WordPress Themes and Plugins and I am an Envato Author.

Furthermore I reply on Stackoverflow and you can follow me on Twitter.

 

So far, stay tuned 🙂