Using HTML Description Lists

For the longest time, I completely dismissed a set of tags in HTML simply because I had no use for their once-limiting specification. In versions of the specification prior to HTML5, the <dl>tag— along with its <dt> and <dd> children—were defined as definition lists.

Each definition in the list consisted of sets of definition terms (<dt>s) and definitions (<dd>s). Terms could have multiple definitions, and likewise each definition could have multiple terms associated with it. The order, however, matters: terms came before their definitions in definition lists.

A simple example:

<dl>
    <dt>apple</dt>
    <dd>a fruit</dd>

    <dt>carrot</dt>
    <dt>broccoli</dt>
    <dd>a vegetable</dd>
</dl>

Default styling in browsers would render each piece of the list on its own separate line, with terms bolded and each definition indented. This styling resembled what you might come to expect from a dictionary.

So unless you were displaying a glossary of jargon on your website, the definition list didn’t have much use for you.

Definition Lists Become Description Lists

With HTML5, definition lists got revised and renamed description lists. Instead of just of just containing dictionary style definitions, <dl>s could now be used in other scenarios, namely to define key-value relationships.

This becomes a much more valuable tool when you need to list a bunch of meta-like content in a webpage, which is something I often find myself doing. Before I knew of this change in the spec, I would have marked up some meta information like so:

<ul>
    <li><b>Name:</b> Sky</li>
    <li><b>Color:</b> Blue</li>
    <li><b>Notable residents:</b>
        <ul>
            <li>The sun</li>
            <li>Clouds</li>
            <li>Birds</li>
        </ul></li>
</ul>

…and then probably used CSS to remove the bullet points and margins.

This is okay, but it carries little semantic meaning beyond it being an unordered list. This is no relationship from the attributes being described (what’s in the <b> tags) and the descriptions.

A better choice for this list would be a description list:

<dl>
   <dt>Name:</dt>
   <dd>Sky</dd>

   <dt>Color:</dt> 
   <dd>Blue</dd>

   <dt>Notable residents:</dt>
   <dd>The sun</dd>
   <dd>Clouds</dd>
   <dd>Birds</dd>
</dl>

This could even be refined a step further: using the :after pseudo element, I don’t have to include the colon at the end of each <dt>and instead insert it using CSS, since it is more of styling choice:

<dl>
   <dt>Name</dt>
   <dd>Sky</dd>

   <dt>Color</dt> 
   <dd>Blue</dd>

   <dt>Notable residents</dt>
   <dd>The sun</dd>
   <dd>Clouds</dd>
   <dd>Birds</dd>
</dl>

And the CSS for this list could be:

dt {
    font-weight: bold;
}

dt:after {
    content: ": ";
}

Use in My Projects

I have yet to implement this particular pattern in any live projects. I’ve played around with it in little experiments.

However, I do plan to use this in some parts of the IU1 website. For instance, right now on the top of an events listing page we include the dates of the event, the location, and the registration button.

iu1orgeventdetails

This section, as it currently stands, is a mixture of <h3> tags and unordered lists. Not terrible, but could be simplified a bit by adding in description lists:

<dl class="event-meta">
    <dt class="event-meta__heading">When</dt>
    <dd>January 20, 2016 (8:30 am–3:30 pm)</dd>
    <dd>May 4, 2016 (8:30 am–3:30 pm)</dd>
    <dd>October 12, 2016 (8:30–3:30 pm)</dd>

    <dt class="event-meta__heading">Where</dt>
    <dd><abbr>IU1</abbr> Education Campus at Colonial (<a href="…">Directions</a>)</dd>
</dl>

So that’s my plan: start using description lists more frequently and appropriately.

More Reading on Definition Lists

Check out this CSS Tricks article from almost 9 years ago (!!!) covering the same topic: Utilizing the Underused [But Semantically Awesome] Definition List.