Definition lists

One of the most useful forms of list, and one which is often overlooked as a means of crafting lean but meaningful code, is the definition list. This variety of list is built using three tags, <dl>, <dt> and <dd> which are similar to the <ul> (or <ol>) and <li> tags used in unordered and ordered lists—except that in definition lists we use three parts.

To see a definition list in action, have a look at the Phrase elements page, where the list of elements is constructed using a definition list.

The definition list can be used as another means of creating subheadings. It is most useful where there are one or more headings which are each followed by a short description. Each item definition list contains term and description elements, and the whole is wrapped in a tag which tells us what kind of list it is.

The definition list

The definition list tag defines where the list starts and finishes. We use <dl> to start the list and </dl> to finish it.

Anything between the overall definition-list tags (<dl></dl>) must be also enclosed in either a term (<dt>) or a description (<dd>) tag. In other words, we cannot have other tags directly enclosed by <dl></dl>.

The definition term

The definition term is the heading for the description. It is created by enclosing the text between <dt> and </dt>. This tag may contain any inline elements but must not contain block-level elements.

Any number of <dt></dt> elements may be used.

The definition description

The definition description may contain anything—from a single word to lengthy text which is itself formatted using any block-level elements, including other nested definition lists. This makes the definition list very powerful as a tool with which to build structure into the page.

An example

Let's examine a simple list:

Fruit: The usually sweet and fleshy edible product of a plant or tree, containing the seed.
Vegetable: Any plant, but especially a herbaceous plant used for food.

We start with our list in plain text:

 Fruit
					

					The usually sweet and fleshy edible product of a plant or tree, containing the seed.
					

					

					Vegetable
					

					Any plant, but especially a herbaceous plant used for food.

We begin our mark-up by enclosing the list between definition list tags:

 <dl>
					

					Fruit
					

					The usually sweet and fleshy edible product of a plant or tree, containing the seed.
					

					

					Vegetable
					

					Any plant, but especially a herbaceous plant used for food.
					

					</dl>

then we tag each of our terms:

 <dl>
					

					<dt>Fruit</dt>
					

					The usually sweet and fleshy edible product of a plant or tree, containing the seed.
					

					

					<dt>Vegetable</dt>
					

					Any plant, but especially a herbaceous plant used for food.
					

					</dl>

lastly, we tag each definition:

 <dl>
					

					<dt>Fruit</dt>
					

					<dd>
					

					The usually sweet and fleshy edible product of a plant or tree, containing the seed.
					

					</dd>
					

					

					<dt>Vegetable</dt>
					

					<dd>
					

					Any plant, but especially a herbaceous plant used for food.
					

					</dd>
					

					</dl>

Going further

As mentioned earlier, the definition description can contain any other inline or block-level elements, so let's add some detail to our list:

Fruit

The usually sweet and fleshy edible product of a plant or tree, containing the seed.

Apples
Pears
Bananas
Oranges

Vegetable

Any plant, but especially a herbaceous plant used for food.

Can you see what we've done here? The first definition description (the one under "Fruit") now contains an unordered list of types of fruit.

The code now looks like this:

<dl>
					

					<dt>Fruit</dt>
					

					  <dd>
					

					    The usually sweet and fleshy edible product of a plant or tree, containing the seed.
					

					     <ul>
						

						      <li>Apples</li>
						

						      <li>Pears</li>
						

						      <li>Bananas</li>
						

						      <li>Oranges</li>
						

						    </ul>
						

					   </dd>
					

					<dt>Vegetable</dt>
					

					  <dd>
					

					    Any plant, but especially a herbaceous plant used for food.
					

					  </dd>
					

					</dl>