Adding Lists

Unordered Lists

If you've done any word processing or prepared slides for presentations then you're probably familiar with the concept of "bulleted" lists. That's what we're talking about when we say "unordered" list. It's very simple to do - put <ul> at the front of the list, each list item is defined with <li></li> pair, and the list ends with </ul>. To show a list of popular pets you would do something like:

       <ul>
        <li>Dogs</li>
        <li>Cats</li>
        <li>Fish (Mrs. Paul's?)</li>
        </ul>

which would end up looking something like:

• Dogs
• Cats
• Fish (Mrs. Paul's?)

There is some flexibility with the bullet style. You would indicate what type of bullet you want to use by putting it on the <ul> element if it applies to the whole list, or put it on the individual <li> tags if you want it by item.

For the whole list it would work like this:

       <ul type=square>
        <li>Dogs</li>
        <li>Cats</li>
        <li>Fish (Mrs. Paul's?)</li>
        </ul>

which would display like:

• Dogs
• Cats
• Fish (Mrs. Paul's?)

To put a different bullet on a particular item you would do:

       <ul>
        <li type=square>Dogs</li>
        <li>Cats</li>
        <li type=circle>Fish (OK I'll leave off the joke)</li>
        </ul>

This would be displayed like so:

• Dogs
• Cats
• Fish (OK I'll leave off the joke)

And that demonstrates the three types of bullets as well - square, disc and circle.

You can nest lists within lists to create even more striking arrangements. It would work something like this:

       <ul>
        <li>Dogs
                <ul type=circle>
                <li>Chihuahua</li>
                <li>Min Pin</li>
                <li>Yorkshire Terrier</li>
                </ul>
        </li>
        <li>Cats</li>
        <li>Fish</li>
        </ul>

Which would look something like:

• Dogs
  • Chihuahua
  • Min Pin
  • Yorkshire Terrier
• Cats
• Fish

You can get a lot of mileage out of this simple element and a little imagination.

Ordered Lists

A natural progression from unordered list don't you think? It uses the <ol></ol> pair to define the list but uses the same <li></li> pair to define the individual entries. Since this is an ordered list you are allowed to specify the format of the numbers you want to use and the starting value. A simple example is:

       <ol>
        <li>Get up</li>
        <li>Shower</li>
        <li>Go to work</li>
        </ol>

which would end up looking something like this:

1. Get up
2. Shower
3. Go to work

If I had wanted to use small letters instead of numbers then I would have put:

       <ol type=a>
        <li>Get up</li>
        <li>Shower</li>
        <li>Go to work</li>
        </ol>

which would come out like:

1. Get up
2. Shower
3. Go to work

Just like in unordered lists, you can nest lists within lists. You would need to specify the type of numbering you would want on each list - the browser won't automatically format an outline for you like a word processor will.

You can specify a starting value for the list, just in case you need to. It works like this:

       <ol start=6 type=1>
        <li>Lunch</li>
        <li>Snickers Break</li>
        <li>Good Humor Truck comes by</li>
        <li>Dinner (not very hungry)</li>
        </ol>

which would come out looking like:

6. Lunch
7. Snickers Break
8. Good Humor Truck comes by
9. Dinner (not very hungry)

I was going to show you the uppercase Roman Numeral rendition but it came out really messed up. Maybe that was just in the editor I was using. Hmmmm. I'll have to check that out.

Definition Lists

Now this can be used just like the name implies, or, as some of us early birds did, use it to provide some form of formatting control over the page. I know that's frowned upon by the purists, but hey, if it works!?!? Anyway, you use the <dl></dl> pair to contain the list, the <dt></dt> pair to mark the text that appears as the term to be defined and the <dd></dd> pair to contain the definition.

A traditional example would look like this:

       <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language used to create 
            web pages</dd>
        </dl>

which is displayed like:

HTML

HyperText Markup Language used to create web pages

The text between the <dt></dt> pair can only be text, but the <dd></dd> tags can contain just about anything except headings and address elements.

One of the first things I noticed about this type of list is that it indents the text! What a neat way to provide space on the left, white space, big margins - without resorting to tables! By nesting these tags you can end up with some nice margin settings. Experiment a little bit and see what you can come up with.

Also Ran Lists

There are two other list types that are kind of mentioned in passing. These are the <dir></dir> (directory) and <menu></menu> (menu) lists.

The directory listing is done like so:

       <dir>
        <li>Jones, Davey</li>
        <li>Lewis, Jerry</li>
        <li>Martin, Dean</li>
        <li>Martin, Dick</li>
        <li>Rowan, Dan</li>
        </dir>

which comes out looking like:

If this looks familiar, it's because the directory listing is treated just like an unordered list.

Now the menu list:

       <menu>
        <li>Chicken</li>
        <li>Beef</li>
        <li>Vegetable</li>
        </menu>

which looks like:

My, how boring, it comes out like the unordered list, also. So much for useless tags.

The Rusk Family . . . "the Legend Continues"