Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

Definition Lists

What is a definition list?

When it comes to website design and programming HTML, there are three types of lists we can use to convey information - ordered, unordered, and definition. Definition lists are quite different in that each list item is not designated by a bullet or number, but a term or phrase.

The biggest difference with definition lists is that each list item has both a term and a definition.

A Simple Definition List

Let's start with a simple list.

<dl>
   <dt>Definition List</dt>
   <dd>A definition list is a type of list used on webpages that contains both a term and a definition.</dd>
</dl>

The output for that list would be similar to what follows...

Definition List
A definition list is a type of list used on webpages that contains both a term and a definition.

Each term is surrounded with the tags <dt> and </dt> and the definition is surrounded by the tags <dd> and </dd>. The definition is automatically indented from the term for greater readability.

Multiple Tiers of Information Using Definition Lists

Definition lists, unlike ordered and unordered lists are also much easier to use with multiple paragraphs of information. By simply adding another definition, we can have two or more paragraphs with the same formatting following a term.

<dl>
   <dt>Definition List</dt>
   <dd>A definition list is a type of list used on webpages that contains both a term and a definition.</dd>
   <dd>Definition lists are more flexible than ordered and unordered lists because a single term can have multiple definitions without having to list the term more than once.</dd>
   <dd>This is just another line of text for our definition list example.</dd>
</dl>

The output for that list would be similar to what follows...

Definition List
A definition list is a type of list used on webpages that contains both a term and a definition.
Definition lists are more flexible than ordered and unordered lists because a single term can have multiple definitions without having to list the term more than once.
This is just another line of text for our definition list example.

Let's Fancy Up Our Definition List

Using a bit of inline CSS, you can see how definition lists can be further formatted for a better appearance. Using a style sheet would normally be preferred to allow one definition for dt and dd terms - I am only using inline styles to make the examples easier to understand.

With our previous example, our term kinda blends in and doesn't really stand out - let's make it bold-faced and underlined. Also, it would look much better if there was a blank line in between each of our 'definitions'.

Here's how we could make that happen with a bit of inline CSS...

<dl>
   <dt style="font-weight: bold; text-decoration: underline">Definition List</dt>
   <dd style="padding-bottom:15px">A definition list is a type of list used on webpages that contains both a term and a definition.</dd>
   <dd style="padding-bottom:15px">Definition lists are more flexible than ordered and unordered lists because a single term can have multiple definitions without having to list the term more than once.</dd>
   <dd style="padding-bottom:15px">This is just another line of text for our definition list example.</dd>
</dl>

The output for that list would be similar to what follows...

Definition List
A definition list is a type of list used on webpages that contains both a term and a definition.
Definition lists are more flexible than ordered and unordered lists because a single term can have multiple definitions without having to list the term more than once.
This is just another line of text for our definition list example.

You should get the idea. Just like any other HTML tags, the 3 involved with creating definition lists can be assigned styles to make them more visually appealing.

Definition Lists for SiteMaps

In another tutorial, we talked about creating SiteMaps for our websites. Definition lists are a great way to use the embedded formatting to make a sitemap with as little code and extra content as possible and is how the site map for Help For Web Beginners was created.

With this site, I used the top level categories as the terms and each of the articles and tutorials in that category is listed as a definition. The following is a section of the sitemap for this site to give you a better idea of what I mean.

<dl>
<dt><a href="http://www.helpforwebbeginners.com/usability.html">Usability Tips for New Webmasters</a></dt>
<dd><a href="http://www.helpforwebbeginners.com/usability/
web-usability-defined.html">Website Usability Defined</a></dd>
<dd><a href="http://www.helpforwebbeginners.com/usability/pdf.html">5 Reasons Not to Use PDFs on Websites</a></dd>
<dd><a href="http://www.helpforwebbeginners.com/usability/linkcolors.html" >Usability and Link Text Appearance</a></dd>
</dl>

That HTML code will produce the following...

Usability Tips for New Webmasters

Website Usability Defined

5 Reasons Not to Use PDFs on Websites

Usability and Link Text Appearance

A Final Word

Definition lists are a great tool to keep in your web programmer's bag of tricks. They are often overlooked in favor of the more commonly used ordered and unordered lists; but I believe they are much more versatile.

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.