Grouping Content - Description List

The description list represents a list of name value groups. It is represented by the dl element.
An empty dl element is perfectly valid but for most practical purposes, we will want to have some data in there.
To do this, we need to use a combination of dt and dd elements.

The dt element represents a name and a dd element represents a value.
dt and dd elements have a many to many relationship so you can represent lots of different forms of data. However, you can only have one dt element with a given name.

So,

<dl>
<dt>Authors</dt>
<dd>James Flanagan</dd>
<dd>John Smith</dd>
</dl>

is valid but:

<dl>
<dt>Author</dt>
<dd>James Flanagan</dd>
<dt>Author</dt>
<dd>John Smith</dd>
</dl>

is not valid.

To get a many to many relationship, you can group the dt elements and the dd elements so:

<dl>
<dt>People Names</dt>
<dt>Animal Names</dt>
<dd>Max</dd>
<dd>Charlie</dd>
<dd>Toby</dd>
</dl>

is perfectly valid.

However, if the groups do not completely overlap, duplication will have to be added by having the values repeated in each group.

An alternative way of getting a similar semantic document using classes would be:

<dl>
<dt>Names</dt>
<dd class="animal people">Max</dd>
<dd class="animal people">Charlie</dd>
<dd class="animal people">Toby</dd>
<dd class="animal">Pooch</dd>
<dd class="people">Alex</dd>
</dl>

This has the benefit of allowing values that don't completely overlap without adding duplication of values into the list.

Other valid uses of a description list include:

• Meta Data
• Set of Instructions
• FAQs
• Glossaries
• Dictionaries

Feel free to share your experiences and opinions related to this post in the comments and if you liked this blog post and can't wait to read more, bookmark this site or subscribe to the RSS Feed.