In Defence of the Definition List

There are several different types of list elements in HTML5, and in a world where the ordered list and unordered list prevail, it would be true to say the definition list will never win a popularity contest. The definition list has become lost in a sea of ambiguity — but there comes a time when we need to step back and look at things a little differently. Here, I want to re-introduce you to this forgotten, if not misunderstood, feature of semantic markup.

Structure and Semantics

Definition lists are not too dissimilar to the typical ordered or unordered list, but unlike these items they are made of three primary elements:

  • the description list or <dl>
  • the term or <dt>
  • the description or <dd>

With the release of HTML5, the <dl> was renamed “description list” to clear up any outstanding confusion and enable developers to use it more appropriately.

To create a definition list you would simply write:

<dl>
 <dt>Term 1</dt>
 <dd>Term 1 (description)</dd>
 <dt>Term 2</dt>
 <dd>Term 2 (description)</dd>
</dl>

You can also include multiple descriptions (<dd>) for a single term (<dt>) like this:

<dl>
 <dt>Term 1</dt>
 <dd>Term 1 (description 1)</dd>
 <dd>Term 1 (description 2)</dd>
 <dd>Term 1 (description 3)</dd>
 <dt>Term 2</dt>
 <dd>Term 2 (description 1)</dd>
 <dd>Term 2 (description 2)</dd>
 <dd>Term 2 (description 3)</dd>
</dl>

I still feel that the use of the word “term” for a <dt> is a misnomer. I prefer to think of it as a “value” because in the real world the use of this model could translate to:

<dl>
 <dt>News 1 (Title)</dt>
 <dd>News 1 (image)</dd>
 <dd>News 1 (description)</dd>
 <dd>News 1 (link)</dd>
 <dt>News 2 (Title)</dt>
 <dd>News 2 (image)</dd>
 <dd>News 2 (description)</dd>
 <dd>News 2 (link)</dd>
</dl>

And for code view clarity you may even want to expand it and write it in the following format:

<dl>
 <dt>News Story 1 (Title)</dt>
   <dd>News Story 1 (image)</dd>
   <dd>News Story 1 (description)</dd>
   <dd>News Story 1 (link)</dd>
 <dt>News Story 2 (Title)</dt>
   <dd>News Story 2 (image)</dd>
   <dd>News Story 2 (description)</dd>
   <dd>News Story 2 (link)</dd>
 <dt>News Story 3 (Title)</dt>
   <dd>News Story 3 (image)</dd>
   <dd>News Story 3 (description)</dd>
   <dd>News Story 3 (link)</dd>
</dl>

The range or type of content you can present in this relationship is endless. From blogs to products, events to statistics, you simply need to realise that where the <dl> tag acts as an enclosure, the subsequent grouping of a term and a description or a term and multiple descriptions implies that the definition list is a near perfect example of semantic markup in action. Think of it this way: listing items that consist of paired values in a single element should be welcome news for the designer, developer and SEO alike.

It may not be a traditional way of doing things (born from the era of HTML4), but this is where the definition list triumphs over the other list types. Remember, both unordered lists and ordered lists can only contain list elements, so the title and description will not be semantically described as well as the same data being found within a definition list. I wouldn’t disagree if you pointed out that whatever a definition list can do can also be achieved within a nested table or within a complex array of <div> tags. But if you compare the results, and ignore the code bloat the question begs, which would be your logical choice?

Stylistics

The most basic output of a definition list can, like many other list types, can look a bit dull. For instance, let’s examine the following code:

<dl>
  <dt>News Story 1 (title)</dt>
    <dd>News Story 1 (date)</dd>
    <dd>News Story 1 (story)</dd>
  <dt>News Story 2 (title)</dt>
    <dd>News Story 2 (date)</dd>
    <dd>News Story 2 (story)</dd>
</dl>

However, you can include block-level elements in the description (<dd>) like this:

<dl>
 <dt>Product Title</dt>
 <dd><strong>Product Code</strong></dd>
 <dd><p>Product Description</p></dd>
 <dd>
   <ul>
     <li>Product Feature 1</li>
     <li>Product Feature 2</li>
     <li>Product Feature 3</li>
   </ul>
 </dd>
</dl>

Again, the exact nature of the example may not be perfect for everyone, but did you notice the inclusion of the additional HTML tags within the <dd> element? For example, if you were wanting to pursue an e-commerce solution, you could enhance the above code and produce something similar to this:

<dl>
 <dt>Product 1 (Title)</dt>
  <dd><p>Product 1 (description)</p></dd>
  <dd><p>Product 1 (price)</p></dd>
  <dd><p>Product 1 (image)</p></dd>
  <dd>
   <ul>
     <li><span>Product 1/Feature 1 (Title)</span></li>
     <li><span>Product 1/Feature 2 (Title)</span></li>
     <li><span>Product 1/Feature 3 (Title)</span></li>
     <li><span>Product 1/Feature 4 (Title)</span></li>
     <li><span>Product 1/Feature 5 (Title)</span></li>
     <li><span>Product 1/Feature 6 (Title)</span></li>
   </ul>
  </dd>
 <dt>Product 2 (Title)</dt>
  <dd><p>Product 2 (description)</p></dd>
  <dd><p>Product 2 (price)</p></dd>
  <dd><p>Product 2 (image)</p></dd>
  <dd>
   <ul>
     <li><span>Product 2/Feature 1 (Title)</span></li>
     <li><span>Product 2/Feature 2 (Title)</span></li>
     <li><span>Product 2/Feature 3 (Title)</span></li>
     <li><span>Product 2/Feature 4 (Title)</span></li>
     <li><span>Product 2/Feature 5 (Title)</span></li>
     <li><span>Product 2/Feature 6 (Title)</span></li>
   </ul>
  </dd>
</dl>

On the other hand, you could use the definition list to give clarity to your forms like this:

<form>
      <dl>
        <dt>First Name:</dt>
          <dd><input type="text" id="firstname" /></dd>
        <dt>Last Name:</dt>
          <dd><input type="text" id="lastname" /></dd>  
        <dt>Email Address:</dt>
          <dd><input type="text" id="email" /></dd>
        <dt>Comments:</dt>
          <dd><textarea rows="5" cols="30" id="comments"></textarea></dd>
      </dl>
      <input type="submit" value="Submit" />
</form>

You should be aware that the <dt> cannot contain any block-level elements. So yes, there are some accessibility restrictions that would prevent you from using the definition list as a complete replacement for tables and various other data-bound functions that may require labels and headers. When considering the visual aesthetic, ask yourself: does the inability to add block-level elements to a near semantically perfect object imply a design restriction or does this basic rule provide functional clarity that can be overcome with a sprinkling of CSS?

To answer this question, we shall begin with a basic structure like this:

<dl>
  <dt>News Item 1</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.read more ...</dd>
  <dt>News Item 2</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.read more ...</dd>
  <dt>News Item 3</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.read more ...</dd>
</dl>

Which could be enhanced like this:

<style type="text/css">
  dl.wrapper1 {margin:0;padding:.5em;width:460px;background-color:#fff;font-size:1em;font-family:Georgia, "Times New Roman", Times, serif;}
  dt {margin:0;padding:.5em;font-weight:bold;background-color:#e0e0e0;}
  dd {margin:0;padding:0;padding-top:.5em;padding-bottom:.5em;}
  dd .div1 {padding-left:.5em;border-left:1px solid #333;font-size:.9em;clear:both;}
  dd .div2 {color:#900;font-size:.76em;margin-top:.5em;margin-bottom:.5em;clear:both;}
</style>

<dl class="wrapper1">
  <dt>News Item 1</dt>
    <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.</div><div class="div2">read more ...</div></dd>
  <dt>News Item 2</dt>
	<dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.</div><div class="div2">read more ...</div></dd>
  <dt>News Item 3</dt>
	<dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.</div><div class="div2">read more ...</div></dd>
</dl>

What about a simple bar chart, where this (and I purposely used inline CSS to make it nice and easy to customise with dynamic values):

<style>
  dt {margin:0;padding:.5em;font-weight:bold;background-color:#e0e0e0;}
  .chartwrapper {width:480px;color:#000;margin-top:10px;margin-bottom:10px;font-size:.6em;clear:both;font-family:Arial, Helvetica, sans-serif;}
  .charttitle {font-size:1.2em;font-weight:bold;color:#ccc;clear:both;}
  dl.chart{margin:.6em;margin-left:0em;margin-right:0em;padding:.6em;padding-right:0em;padding-left:0em;width:480px;}
  dl.chart dd{margin:.6em;margin-left:0em;margin-right:0em;padding:.3em;padding-right:0em;padding-left:0em;text-align:right;}
  dl.chart dt{font-weight:bold;margin:.6em;margin-left:0em;margin-right:0em;padding:.3em;padding-right:0em;padding-left:1em;}
</style>

<div class="chartwrapper">
  <div class="charttitle">An simple chart showing browser views</div>
	<dl class="chart">
        <dt>Firefox</dt>
        <dd style="background:#ffcc00;width:47%;"><div style="padding-right:5px;">Sunday<br />47%</div></dd>
        <dd style="background:#ffcc00;width:23%;"><div style="padding-right:5px;">Monday<br />23%</div></dd>
        <dd style="background:#ffcc00;width:45%;"><div style="padding-right:5px;">Tuesday<br />45%</div></dd>
        <dd style="background:#ffcc00;width:23%;"><div style="padding-right:5px;">Wednesday<br />23%</div></dd>
        <dd style="background:#ffcc00;width:25%;"><div style="padding-right:5px;">Thursday<br />25%</div></dd>
        <dd style="background:#ffcc00;width:60%;"><div style="padding-right:5px;">Friday<br />60%</div></dd>
        <dd style="background:#ffcc00;width:10%;"><div style="padding-right:5px;">Saturday<br />10%</div></dd>
        <dt>IE</dt>
        <dd style="background:#ffcc00;width:13%;"><div style="padding-right:5px;">Sunday<br />13%</div></dd>
        <dd style="background:#ffcc00;width:47%;"><div style="padding-right:5px;">Monday<br />47%</div></dd>
        <dd style="background:#ffcc00;width:20%;"><div style="padding-right:5px;">Tuesday<br />20%</div></dd>
        <dd style="background:#ffcc00;width:27%;"><div style="padding-right:5px;">Wednesday<br />27%</div></dd>
        <dd style="background:#ffcc00;width:25%;"><div style="padding-right:5px;">Thursday<br />25%</div></dd>
        <dd style="background:#ffcc00;width:20%;"><div style="padding-right:5px;">Friday<br />20%</div></dd>
        <dd style="background:#ffcc00;width:30%;"><div style="padding-right:5px;">Saturday<br />30%</div></dd>
        <dt>Opera</dt>
        <dd style="background:#ffcc00;width:40%;"><div style="padding-right:5px;">Sunday<br />40%</div></dd>
        <dd style="background:#ffcc00;width:30%;"><div style="padding-right:5px;">Monday<br />30%</div></dd>
        <dd style="background:#ffcc00;width:35%;"><div style="padding-right:5px;">Tuesday<br />35%</div></dd>
        <dd style="background:#ffcc00;width:50%;"><div style="padding-right:5px;">Wednesday<br />50%</div></dd>
        <dd style="background:#ffcc00;width:50%;"><div style="padding-right:5px;">Thursday<br />50%</div></dd>
        <dd style="background:#ffcc00;width:20%;"><div style="padding-right:5px;">Friday<br />20%</div></dd>
        <dd style="background:#ffcc00;width:60%;"><div style="padding-right:5px;">Saturday<br />60%</div></dd>
	</dl>
</div>

The examples I have used aren’t earth-shattering, but my intention is to provide you with a starting point to illustrate what is being discussed. Have some fun, play with the CSS and I’m sure it won’t be long before you see what I have been trying to say.

It’s All About Context

The purpose of this article was not to advocate the wholesale removal or replacement of the unordered or ordered list. But consider that the often misunderstood and unused definition list does have a role that makes it a very useful tool when crafting your website.

I am sure many of you will still  argue that the use of the definition list is only relevant when creating terms and definitions or dialogues for speech. Technically speaking, these reasons are still valid, but they are self-imposed limitations, and if we were to consider that the definition list is (in essence) a relationship-modelling tool, I am sure this could strongly support the usage of this element in many more situations.

 

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.cheapwebdesigncompany.net web development company

    Web Designing is changing at a rapid pace, once we used photoshop and frontpage, now we have a list of other things that command attention.
    The option is to specialize. You need to constantly evolve yourself, and not limit your expertise to just one field. Although it may seem scary, but specializing is not an option for web designers.

  • Chris Emerson

    “[...] restrictions that would prevent you from using the definition list as a complete replacement for tables”

    …or perhaps that there is a perfectly good table element that is ideal for this purpose?

    I agree with you that it is under utilised though. I’ve never liked the idea of marking up forms with a dl, but as a general title-value list it’s ideal. You can’t really define someone’s first name as a blank input box :P

    It’s ideal for a lot of places people use tables with only 2 columns – this isn’t a table, it’s just a list with a title for each item.

    I don’t agree that the dl is in any way ‘forgotten’ though. I use them all the time!

  • http://petewarman.com Pete Warman

    Pretty much every time I try to use a definition list I find the spec for this element limits the available layout options. Say I want to layout a glossary of terms in a tabular structure with my DTs on the left and my DDs on the right, and maybe I’d like to have alternating ‘zebra’ striped rows of definitions. You can’t do this easily with a definition list because you can’t add an extra wrapper around your DT-DD pairs. I find I always have to settle for less semantic markup using divs headings and paragraphs for example. This is the only element I can think of that I’ve found limits my layout options like this so I’ve learnt to avoid it.

  • http://twitter.com/jordangray Jordan Gray

    I have to say, I wouldn’t use definition lists for any of these. For example, an item in a list of news stories could be better represented in HTML5 as:

    News Story 1 (Title)
    News Story 1 (Image)
    News Story 1 (Description)
    News Story 1 (link)

    The sectioning algorithm associates headings with the content below them, so there is no need to use a definition list for this. And since links can contain block content in HTML5, you could make the whole thing a link to the story—which is nicer than having “read more” links all over the place:


    News Story 1 (Title)
    News Story 1 (Image)
    News Story 1 (Description)

    Similarly, for the product example, you could use:

    Product Title
    Product Code
    Product Description

    Product Feature 1
    Product Feature 2
    Product Feature 3

    The form example also seems unnecessary, since you can better associate text with form elements using the element:

    Last Name:

    The bar chart is an interesting example, but I would probably use inline SVG for this:

    An simple chart showing browser views
    Firefox

    I’m all for clever and economical use of markup, but there is more than one way of making an association in HTML, and in my judgement these are usually more appropriate.

    • http://twitter.com/jordangray Jordan Gray

      So apparently SitePoint does allow limited HTML in comments, although it’s not pointed out, so my previous comment is basically mangled. For anyone confused, my code samples were:

      <h1>News Story 1 (Title)</h1>
      <figure>News Story 1 (Image)</figure>
      <p>News Story 1 (Description)</p>
      <a>News Story 1 (link)</a>
      
      
      <a>
        <h1>News Story 1 (Title)</h1>
        <figure>News Story 1 (Image)</figure>
        <p>News Story 1 (Description)</p>
      </a>
      
      
      <article>
        <h1>Product Title</h1>
        <p><strong>Product Code</strong></p>
        <p>Product Description</p>
        <ul>
          <li>Product Feature 1</li>
          <li>Product Feature 2</li>
          <li>Product Feature 3</li>
        </ul>
      </article>
      
      
      <label for="lastname">Last Name:</label> <input id="lastname">
      
      
      <figure>
        <figcaption>An simple chart showing browser views</figcaption>
        <h1>Firefox</h1>
        <svg>
          …
        </svg>
      <figure>
  • http://www.nosnetrom.com MoreTea

    Brilliant article! I have been a fan of the semantic nature of the for a long time.

  • http://theheatexchange.wordpress.com/ H.E.A.T.

    Whether the list is called “definition” or “description”, the value of the element should define or describe the value of the element. This is the true semantics of the list.

    In a lot of the above examples, the value of is simply expanding on components of . For example, a news article is not a description of a title, but the actual article itself.

    Using the list for product descriptions seems appropriate only if the are portraying the item identified in the .

    Additionally, using the list to enclose an tag within a and providing a long description or a link to a long description in the associated would also be appropriate for the HTML5 version of the list. This method would semantically connect the long description to the image.

    The ambiguity of definition lists (as defined by HTML 4.01) does not lie in the specification. Some simply misused the lists for purely visual purpose. Pick a term (dt) and define it (dd). No ambiguity there.

    The editors of the HTML5 specification may want to be careful and not allow the crazies to run the asylum when “redefining” some of these tags.

  • http://jwmcgregor.com James McGregor

    This was an excellent post – gave me lots of ideas. I had never used the DL before – So one more arrow now to add to the quiver thanks to this post.

  • http://raym31.home.comcast.net/ Ray

    I liked this article, but I feel that like many other such post dealing with the subject it misses the point of “WHY/WHEN” is a DL semantically correct. For example, someone reading this might misinterpret that articles with “read more” links should be coded with DLs. code data into l to do a bar chart.

    Dont get me wrong. This is a very nice piece, but for it to be truly informative I would have liked to see the author take, or reasoning , as the why particular content is “definitional”. Remeber when using UL became standard way of coding SIMPLE navs. “Because a navigation bar is simply a series, or list, of links, if they are in order( as in a table of contents) one should opt for an OL other wise a UL should be used.”

    Something like that.

  • Stevie D

    I don’t deny that definition lists are underused, but they are just as susceptible to misuse as any other arrow in HTML’s armoury … as you have demonstrated.

    Your example with news items is a prime case of when it’s easy to get carried away with a new toy and forget the basics. Those are clear-cut headings followed by paragraphs, not examples where you need a term/definition pairing.

    • http://trivial.ly Nicholas Johnson

      Agreed. The first example is clearly not a semantic use for a DL. It should be headings and paragraphs, optionally wrapped in articles or divs. The second use case is arguably acceptable, but very borderline.