Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).

Thus, when advertising a product, one might use a definition list:

Lower cost

The new version of this product costs significantly less than the previous one!

Easier to use

We’ve changed the product so that it’s much easier to use!

Safe for kids

You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee).

Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients) and an ordered list (the procedure):

The ingredients:

• 100 g. flour
• 10 g. sugar
• 1 cup water
• 2 eggs
• salt, pepper

The procedure:

1. Mix dry ingredients thoroughly.
2. Pour in wet ingredients.
3. Mix for 10 minutes.
4. Bake for one hour at 300 degrees.

Notes:

The recipe may be improved by adding raisins.

The exact presentation of the three list types depends on the user agent. Try not to use lists purely as a means of indenting text.

This is a stylistic issue and is properly handled by style sheets. Using padding, margin, or text-indent.

This entry was posted on Thursday, August 31st, 2006 at 9:55 am and is filed under accessibility, authoring, css, html, webcode. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.