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.
