Web Authoring: Lists

Creating Lists

There are three kinds of lists you can create with HTML:

There are: Ordered lists, like the following:

Ordered lists, which have numbered items;
Unordered lists, which have bulleted items; and
Definition lists, which have terms and definitions.

There are: Unordered lists, like the following:

Ordered lists, which have numbered items;
Unordered lists, which have bulleted items; and
Definition lists, which have terms and definitions.

There are: Definition lists, like the following:

Ordered lists: Which have numbered items;
Unordered lists: Which have bulleted items; and
Definition lists: Which have terms and definitions.

All three types of list are comprised of (at least two) different types of tags: A paired tag for the list itself, and an unpaired tag (or, in the case of definition lists, two types of unpaired tag) for the items in the list.

The list tags are: <OL> for ordered lists, <UL> for unordered lists, and <DL> for definition lists. The list items for both ordered and unordered lists are tagged with <LI>. Definition lists use <DT> for the "term" and <DD> for the "definition."

So an ordered list looks like this:

<OL>
<LI> First item.
<LI> Second item.
<LI> Third item.
</OL>

And an unordered list looks like this:

<UL>
<LI> First item.
<LI> Second item.
<LI> Third item.
</UL>

While a definition list looks like this:

<DL>
<DT> First term.
<DD> Definition of first term.
<DT> Second term.
<DD> Definition of second term.
<DT> Third term.
<DD> Definition of third term.
</DL>

By the way, you can leave out the terms (and thus just have "definitions," which are indented), but you cannot leave out the DT-tag itself. It is an error to have a DD-tag without a corresponding DT-tag in front of it. The effect looks like this:

: HTML doesn't support tabs.
: But it does indent certain things.
: So if you want something indented,
: Cheat.

Another "trick" (in the sense of using a tag in some way other than the way it was strictly intended to be used) is to leave out the DD-tags and use the DT-tags as if they were nothing more than items in an unordered list. This gives you effectively the same thing as an unordered list, but without the bullets. This is useful if you plan to use your own icons in place of the bullets (the Lehigh home page does this to get the shaded "3-D" bullets you see). This effect looks like this without the icons:

This is one item.
This is another.
Big deal, huh?

And it looks like this when you add graphics:

This is one item.
This is another.
This is more like it, no?

The final thing you should be aware of is that a list item can be a single word, or a paragraph, or several paragraphs (separated by P-tags). It can even be a whole list. So you can have:

<UL>
<LI> First item.
<UL>
<LI> Point one.
<LI> Point two.
<LI> Point three.
</UL>
<LI> Second item.
<UL>
<LI> Point one.
<UL>
<LI> First niggle.
<LI> Second niggle.
</UL>
<LI> Point two.
<LI> Point three.
</UL>
</UL>

This looks like:

First item.
- Point one.
- Point two.
- Point three.
Second item.
- Point one.
  - First niggle.
  - Second niggle.
- Point two.
- Point three.

This, by the way, is a perfect example of a place where judicious indenting of the HTML source would make it easier to read (and if need be, change), but (because of the fact that this "extra" whitespace would be ignored) would not change the way the resulting document looks at all. (Figuring out which Open-UL-tag goes with which Close-UL-tag isn't very easy, is it?)

SDR, 15 Jun 1995.