Search this book | Previous | Table of contents | Next

List tags

This section describes how to incorporate lists into your HTML documents.

Frequently your text will contains lists of items. In recent years, it seems to become popular to write lists of items as bulleted lists. The HTML codes below allow you to do this. Keep in mind the following HTML codes can nested together producing lists within lists. Also, some of these list tags are "logical" in nature and should be used whenever possible.

Unordered lists

Unordered lists are used to create vertical lists of bulleted items. An example includes the following: The HTML code used to generate this list look like this:
<UL>
<LI>Apples
<LI>Pears
<LI>Bananas
<LI>Pineapples
<LI>Grapes
</UL>
In this example, the <UL>...</UL> is used to mark off the beginning and ending of the list. Within the list, every item is delimited with the "list item" code, <LI>. The HTML "standard" does not provide a means to define the style and shape of the bullets in lists. This function is left up the client application. On the other hand, if you use a few Netscape-specific tags, then you can define the style and shape of the bullets. Of course, these stylistic modification will only work if your reader is using a Netscape browser.

As stated above, you can nest lists within lists to produce things like the following:

This effect is produced with this HTML markup:
<UL>
<LI>Fruits
<UL>
<LI>Apple
<LI>Pears
<LI>Bananas
</UL>
<LI>Vegetable
<UL>
<LI>Potatoes
<LI>Squash
<LI>Beans
</UL>
<LI>Meats
<UL>
<LI>Chicken
<LI>Fish
<LI>Beef
</UL>
</UL>

Ordered lists

Ordered lists work just like unordered lists except numbers proceed every item in the list instead of bullets. There is not need to enter the number yourself. This is function of the tag. For example:
  1. Open door
  2. Insert key
  3. Turn key
  4. Depress clutch
  5. Shift gears
  6. Let out clutch while depressing accelerator
  7. Return to #4 until done
The markup look like this:
<OL>
<LI>Open door
<LI>Insert key
<LI>Turn key
<LI>Depress clutch
<LI>Shift gears
<LI>Let out clutch while depressing accelerator
<LI>Return to #4 until done
</OL>
Again, Netscape offers enhancements to this tag enabling you to specify the type of numeration you want. You can even specify what number (or letter) will be the first one in the list. For example, you can specify:

Menu and Directory

The menu (<MENU>...</MENU>) and directory (<DIR>...</DIR>) tags are the logical list tags. They are used to denote a menu of items or the file listing from a directory. Browsers tend to render these tags just like unordered list tags.

Definition list

The definition list tags is used to list term or phrases as well as the definitions of those terms and phrases. It is also the tag that deviates from the norm since it contains no <LI> indicators.

A typical glossary list in HTML may look like this:

<DL>
<DT>Preschool
<DD>Schooling before the age of 5
<DT>Elementary school
<DD>Grades kindergarten through 12 grade; ages 5 through 18
</DL>
This sort of HTML typically gets rendered like this:
Preschool
Schooling before the age of 5
Elementary school
Grades kindergarten through 12 grade; ages 5 through 18
The <DL>...</DL> tags are used to denote the beginning and ending of the list, respectively. The <DT> is for "definition term" and delimits the term to be defined. The <DD> is "definition definition" and is the explanation or... definition of the term. It is important to make sure the number of <DT>'s is equal to the number of <DD>'s or your list will not be generated correctly.

Search this book | Previous | Table of contents | Next

This page was first published on September 26, 1995. Feel free to send comments.