Keeping it on the < dl > – another HTML gem you never use

In a moment of boredom, I wrote a little app/web page that shows lovely words we should be using more. It is done in plain HTML, JavaScript, and some CSS. The source code is available, and I am also happy to receive pull requests adding more lovely words.

This is not what I wanted to talk about today. Instead, I wanted to talk about a thing I used that I don’t see being used in the wild enough: Description Lists. Never heard of them? You are not alone…

HTML, as you may remember, is not about adding look and feel to a document, but about giving it structure. A definition list is the right thing to use when you have a list of terms and definitions. This is a pretty common thing on the web, and yet I hardly ever see any in use. The first time I came across a description list was in the bookmarks.htm file of Netscape. Here is how description lists are defined:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language - a language to describe content on the web.</dd>
</dl>

Without any CSS they render as terms on lines with a break and descriptions with an indent.

It may be that people don’t know about or don’t use description lists as they have a syntax that is different from other lists. Both unordered (UL) and ordered (OL) lists are parent elements to one or more list item (LI) elements. Description lists are different. The DL element is the direct parent to both the term (DT) and the description element (DD), and there can be more than one of each. Some terms have more than one description, and one description may apply to various terms. MDN has some great demos:

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
 
  <!-- Other terms and descriptions -->
</dl>

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>
 
  <!-- Other terms and descriptions -->
</dl>

The practical upshot of using description lists is that you have baked-in accessibility. Both the term and the description get announced as roles to assistive technology. You can spot-check that using the element picker in the browser developer tools.

Another excellent example on MDN is that you can use description lists to describe metadata as a list of key-value pairs:

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

So, next time you have a list of items you want to describe, why not reach deeper into the HTML treasure chest and use a description list?