Web design development. Simple Definition Lists

Definition lists differ from ordered and unordered lists in that they do not have an automatic label associated with each list item. While ordered lists provide a sequenced number or letter, and unordered lists provide a variety of bullets, definition lists expect you to provide the item labels. This is a lot like a dictionary or glossary, where each entry has a word or phrase, and its definition. Accordingly, each item in a definition list is composed of two parts: The term and the definition.

List basics

You create a definition list with the <DL> tag. Within this tag, you may only include pairs of terms and definitions, denoted by the <DT> and <DD> tags. The contents of these tags can be any arbitrary HTML content. A simple definition list might look like this:

<DL>

<DT>Term 1

<DD>This is the definition of term 1

<DT>Term 2

<DD>This is the definition of term 2

<DT>Term 3

<DD>This is the definition of term 3

<DT>Term 4

<DD>This is the definition of term 4

</DL>

The resulting list looks like this:

Term 1: This is the definition of term 1
Term 2: This is the definition of term 2
Term 3: This is the definition of term 3
Term 4: This is the definition of term 4

In general, browsers expect the terms to be relatively short, and the definitions to be lengthier. The definitions will be indented relative to the terms, and the definition content will wrap and flow within this indented margin.

If you use short terms, it can look odd that your definitions are on the line below the terms. Older versions of Netscape and Internet Explorer would bring the definition up to the same line as the term if the term was short enough, but this feature seems to have evolved out of the current versions of both browsers. This is a unfortunate, since you will have to revert to tables and other tricks to create definition lists whose terms and definitions are on the same line.

Fancier definition lists

To be truthful, definition lists are boring, with no fancy layout features or decoration. You can fix this somewhat, however, with use of stylesheets.

Often, you'll want your terms to be set in a different face or made more distinctive. You can accomplish this by tagging the text in each term, but this is tedious and difficult to maintain. Instead, create a style for the effect you want and apply it to each term. We can spruce up our example list with this style class and alignment:

.fancy {text-align: left; font: bold italic 18pt sans-serif;}

By adding CLASS="fancy" to each <DT> tag, our list becomes:

Term 1: This is the definition of term 1
Term 2: This is the definition of term 2
Term 3: This is the definition of term 3
Term 4: This is the definition of term 4

(Internet Explorer 4 will view these stylistic effects; Netscape will not)

Alignment and Adding Color

To go further, changing color and alignment can achieve even more dramatic changes:

.fancier {text-align: left; font: bold italic 18pt sans-serif; 

           color: red; 

           background-color: yellow; }

which results in:

Term 1: This is the definition of term 1
Term 2: This is the definition of term 2
Term 3: This is the definition of term 3
Term 4: This is the definition of term 4

In short, the sky's the limit when you start applying styles to your definition lists. Although you will probably use ordered and unordered lists far more often, there are many uses for style sheets to make things a little more interesting. There are some more definitions you can discover for yourselves let me know how things make out.

<< BACK