In this tutorial, you will learn how to add and use definition lists to your site.

Setup

This tutorial was written using Visual Studio 2010. Visual studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up visual studio or your favorite text editor. Save this project with the name of your choice.

Step 1: The List

Definitions are a little different from your typical list. You have the word to be defined, and the definition, all within a definition list. Let’s define Coffee and Soda.

Coffee
:: A hot caffeinated beverage that also comes in decaffeinated form.
Soda
:: A cold caffeinated beverage that may come in decaffeinated form.

Step 2: The HTML

Inside your body tags, go ahead and place an opening “dt” tag and a closing “dt” tag. The “dl” stands for Definition List.

Now you have created a set area for your list, now to place the items, simply place “dt” tag pairs for every item to be defined and place the item between the pair of tags. The “dt” stands for definition type. After the “dt” tags, place “dd” tags under those and in between those tags place the definition of the items. Your code should now appear as follows:

Save and run your site. It should appear as follows:

A Few Last Words

Definition lists can come in handy in the case that you are running a tutorial site or for any other reason of course. Much like the ordered and unordered lists, definition lists may be formatted using inline CSS or an external style sheet. Join us next time for more tutorials. See you then!

Download Source Files