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.