Return to my Computer pages
Go to my home page

Beginner's HTML Guide III - Lists

© Copyright 1998, Jim Loy

There are two types of lists in HTML, the unordered list and the ordered list. This is what an unordered list (one with bullets) looks like:

• One potato
• Two potatoes
• Three potatoes
• Four

And this is an ordered (numbered) list:

1. One potato
2. Two potatoes
3. Three potatoes
4. Four

These are pretty simple to do. Here's how you enter them into your HTML file:

  <UL><LI>One potato</LI>
  <LI>Two potatoes</LI>
  <LI>Three potatoes</LI>
  <LI>Four</LI></UL>
  <OL><LI>One potato</LI>
  <LI>Two potatoes</LI>
  <LI>Three potatoes</LI>
  <LI>Four</LI></OL>

Notice that there are three types of tags here:

1. <UL>... </UL>
2. <OL>... </OL>
3. <LI>... </LI>

The first one (<UL>) defines the list as an unordered list. The second one (</OL>) defines the list as an ordered list. And the third one (</LI>) defines a list item. You need the closing tag (</...>) in each case. And that is all there is to it. It's pretty simple.

You can nest (and mix) lists within lists:

• animals
  • mammals
    • apes
      • chimpanzees
      • gorillas
        • Koko
      • orangutangs
        • Librarian
    • cats
    • dogs
    • deer
      • Bambi
  • reptiles
  • amphibians
  • fish
• plants
  • One potato
  • Two potatoes
  • Three potatoes
  • Four

This can get a little difficult to keep straight, unless you have a wysiwyg HTML editor, or indent something like this:

<UL>
<LI>animals
  <UL>
  <LI>mammals
    <UL>
    <LI>apes
      <UL>
      <LI>chimpanzees</LI>
      <LI>gorillas
        <UL><LI>Koko</LI>
        </UL>
      </LI>
      <LI>orangutangs
        <UL><LI>Librarian</LI>
        </UL>
      </LI>
      </UL>
    <LI>cats</LI>
    <LI>dogs</LI>
    <LI>deer</LI>
    </UL>
  </LI>
  <LI>reptiles</LI>
  <LI>amphibians</LI>
  <LI>fish</LI></UL>
</LI>
<LI>plants
  <UL>
  <LI>One potato</LI>
  <LI>Two potatoes</LI>
  <LI>Three potatoes</LI>
  <LI>Four</LI>
  </UL>
</LI>
</UL>

These indentations do not show up in the actual list.

Basic format:

<UL> (unordered list)
<LI>
<LI>
</UL>

or

<OL> (ordered list)
<LI>
<LI>
</OL>

or

<DL> (definition list)
<DT> term
<DD> definition (shown indented)
<DT> term
<DD> definition
</OL>

Options:

<OL> (ordered list)

• <OL TYPE=A> Lists A, B, C... instead of 1, 2, 3... A small "a" will produce a, b, c...
• <OL TYPE=I> Lists I, II, III, IV... A small "i" will produce i, ii, iii, iv...
• <OL START=3> Makes the list start at 3, instead of 1.

<UL> (unordered list)

• <UL TYPE=CIRCLE> You can specify DISK, CIRCLE, or SQUARE.

Return to my Computer pages
Go to my home page