In Defence of the Definition List

Share this article

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.  

Frequently Asked Questions (FAQs) about Definition Lists in HTML

What is the main purpose of using definition lists in HTML?

Definition lists in HTML are used to organize and present a list of terms along with their associated descriptions. They are particularly useful when you need to present a glossary, a set of rules, or any other type of information that can be structured as a list of items with corresponding explanations. Unlike other HTML list types, such as ordered and unordered lists, definition lists provide a semantic way to group terms and their definitions, making the content more accessible and easier to understand.

How do I create a definition list in HTML?

Creating a definition list in HTML involves using three specific tags: <dl>, <dt>, and <dd>. The <dl> tag is used to define the list itself. The <dt> tag is used to specify the term that is being defined, and the <dd> tag is used to provide the definition of the term. Here’s a simple example:

<dl>
<dt>Coffee</dt>
<dd>A hot drink made from the roasted and ground seeds of a tropical shrub.</dd>
<dt>Milk</dt>
<dd>A white liquid produced by the mammary glands of mammals.</dd>
</dl>

Can I nest definition lists within other definition lists?

Yes, you can nest definition lists within other definition lists. This can be useful when you have a term that has multiple definitions or sub-terms. To nest a definition list, you simply include another <dl> element within a <dd> element. Here’s an example:

<dl>
<dt>Coffee</dt>
<dd>
<dl>
<dt>Espresso</dt>
<dd>A type of coffee made by forcing hot water through finely ground coffee beans.</dd>
<dt>Latte</dt>
<dd>A type of coffee made with espresso and hot steamed milk.</dd>
</dl>
</dd>
</dl>

Are there any limitations or restrictions when using definition lists?

While definition lists are a powerful tool for organizing and presenting information, they do have some limitations. For instance, they are not designed to be used for layout purposes, and using them in this way can lead to accessibility issues. Additionally, while you can nest definition lists, it’s important to ensure that the structure remains clear and understandable, as overly complex nested lists can be confusing for users.

How do definition lists impact SEO?

Definition lists can have a positive impact on SEO as they provide a structured and semantic way to present information. This can make it easier for search engines to understand the content of your page, which can potentially improve your page’s ranking. However, like all HTML elements, definition lists should be used appropriately and in accordance with best practices for web development.

Can I style definition lists with CSS?

Yes, you can style definition lists with CSS just like any other HTML element. You can apply styles to the <dl>, <dt>, and <dd> elements individually, allowing you to customize the appearance of your definition lists to suit your needs.

How do definition lists differ from other types of lists in HTML?

Definition lists differ from other types of lists in HTML in that they are designed specifically for presenting terms and their definitions. While ordered and unordered lists are used to present a series of items in a specific order or without any particular order, respectively, definition lists provide a way to group related terms and descriptions together in a semantic way.

Can I use definition lists in combination with other HTML elements?

Yes, you can use definition lists in combination with other HTML elements. For instance, you might include links, images, or other types of content within the <dd> elements of your definition list. However, it’s important to ensure that any additional content is relevant and enhances the overall clarity and usefulness of the list.

Are definition lists supported by all web browsers?

Yes, definition lists are supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, the way definition lists are displayed can vary slightly between different browsers, so it’s always a good idea to test your code in multiple browsers to ensure that it looks and functions as expected.

What are some common use cases for definition lists?

Some common use cases for definition lists include presenting a glossary of terms, a set of rules or guidelines, a list of questions and answers (like this FAQ), or any other type of information that can be structured as a list of terms and their associated descriptions. Because definition lists provide a semantic way to present this type of information, they can make your content more accessible and easier to understand.

Jonathan HobsonJonathan Hobson
View Author

Jonathan is an independent web developer, server administrator and application programmer and for nearly 20 years he has been working behind the scenes to support companies, organisations and individuals from all over the world to realise their digital ambitions. As a practitioner of many the computer languages Jonathan enjoys all things Linux, writing code, building computers, playing the XBOX, history and getting 'out and about' in the big outdoors. He thrives on new challenges, works around the clock and prides himself on being friendly, honest, reliable and ultimately, the complete professional.

htmlhtml & cssHTML5 Dev Centerhtml5 dev centreHTML5 Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week