HTML Defiinition Lists

Definition lists are slightly different from unordered and ordered HTML lists. Rather than simply a list of items, a definition HTML list allows you to list terms and their definitions. However, the structure for definition lists is very similar to the other types.

You begin by using the <dl> (definition list) tag to start your list. Within this list you then enter your terms and definitions. To do this you need to use the <dt> and <dd> tags. A typical definition list might look like this:

<dl>
<dt>Banana</dt>
<dd>Curly yellow thing, tasty</dd>
<dt>Orange</dt>
<dd>Round and err... orange</dd>
<dt>Grapes</dt>
<dd>Small, sweet and squidgy</dd>
</dl>

This will display like this:

Banana: Curly yellow thing, tasty
Orange: Round and err... orange
Grapes: Small, sweet and squidgy

You can see that the definitions are indented from the side, which lends a nice appearance to the list. Later on we will see how to use CSS to change this styling to whatever we want.

Using tables »

« Ordered lists