Description Lists
The HTML Beginner Tutorial looked at unordered lists and ordered lists, but, much like Peter Cushing’s Doctor Who, description lists are quite often forgotten. This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, generally, but where there is a list of terms and descriptions (such as a glossary), a description list is your go-to-element.
dl
gets the ball rolling, similar to the ul
and ol
elements, establishing the list. Rather than containing li
elements, though, description lists have dt
elements, which are the terms, followed by dd
elements, which are the descriptions associated to the dt
elements.
There doesn’t have to be one dt
followed by one dd
, there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of dt
’s followed by one dd
. If you have one word that means various different things, there might be one dt
followed by several dd
’s.
<h1>Some random glossary thing</h1>
<dl>
<dt>HTML</dt>
<dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd>
<dt>Dog</dt>
<dd>Any carnivorous animal belonging to the family Canidae.</dd>
<dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>
<dt>Moo juice</dt>
<dt>Cat beer</dt>
<dt>Milk</dt>
<dd>A white liquid produced by cows and used for human consumption.</dd>
</dl>