There are three main types of lists. Lists are basic text structures. While simple in concept, lists can be very powerful in execution. There are three types of lists: unordered lists, ordered lists, and definition lists. The first two are very similar in structure, while definition lists have a unique setup.

Unordered Lists

The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is -- a list of items, each one preceded by a "bullet" (a distinctive character; typically, a small black circle).

The list begins and ends with the tags <UL> and </UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List Item."

<LI> has a corresponding </LI>, but this closing tag is not required to end the list item (although you could use one if you really wanted to). You can use as many list items as you like, up to your browser's built-in maximum, if any.

Here's the markup for a simple list:

<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>

If you loaded an HTML page containing the markup above, you would see the days of the week, each one preceded by a "bullet." To wit:

• Monday
• Tuesday
• Wednesday
• Thursday
• Friday

Almost anything can be put into a list item -- line breaks, entire paragraphs, images, links, or even other lists. For example:

<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
 <UL>
 <LI>6am - 9am
 <LI>9am - 12n
 <LI>12n - 3pm
 <LI>3pm - 6pm
 </UL>
<LI>Thursday
<LI>Friday
</UL>

In the above case, under "Wednesday" in the 'outer list,' you would find another unordered list (the three-hour blocks of time), which is referred to as a nested list. (In the markup above, I have indented the nested list for purposes of clarity; this is not required for the lists to work. Remember what I've said about whitespace...) Here's how it looks:

• Monday
• Tuesday
• Wednesday
  • 6am - 9am
  • 9am - 12n
  • 12n - 3pm
  • 3pm - 6pm
• Thursday
• Friday

Below is an example of a page with A LOT of nested lists.

• Item 1
  • Item 1
  • Item 2
  • Item 3
• Item 2
• Item 3
  • Item 1
  • Item 2
  • Item 3
    • Item 1
    • Item 2
    • Item 3
  • Item 4
  • Item 5
• Item 4
• Item 5
  • Item 1
    • Item 1
    • Item 2
    • Item 3
  • Item 2
  • Item 3

In theory, you could probably nest lists indefinitely, but a bit of restraint is called for. Don't nest them too deeply unless you absolutely have to, if for no other reason than aesthetics. Nesting lists too far can look quite bad (as shown below).

Example of too much nesting

• Item 1
• Item 2
  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
        • Item 1
        • Item 2
          • Item 1
          • Item 2
            • Item 1
            • Item 2
            • Item 3
          • Item 3
        • Item 3
      • Item 3
    • Item 3
  • Item 3
• Item 3
• Item 4
• Item 5

Ordered Lists

On the face of it, ordered lists look a lot like unordered lists, and a lot of the same rules apply to both constructs. The only difference in HTML is that instead of using <UL> and </UL>, an ordered list is contained within the tags <OL> and </OL>. Ordered lists are based on list items, just as unordered lists are.

However, when an ordered list is displayed in a Web browser, it uses an automatically generated sequence of item markers. In other words, the items are numbered. The markup for a simple ordered list, based on the first example in this section of the module (Unordered Lists):

<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>

The above markup will look similar to the previously discussed simple unordered list, with the important difference that each day of the week is numbered instead of preceded by a "bullet." In other words, it looks like this:

1. Monday
2. Tuesday
3. Wednesday
4. Thursday
5. Friday

Ordered lists are as nestable as unordered lists, and you can nest unordered lists in ordered lists, as well as the other way around. This can get pretty complicated (see below), but sometimes it's what you need.

1. Item 1
   1. Item 1
   2. Item 2
   3. Item 3
2. Item 2
3. Item 3
   • Item 1
   • Item 2
   • Item 3
     • Item 1
     • Item 2
     • Item 3
   • Item 4
   • Item 5
4. Item 4
5. Item 5
   • Item 1
     1. Item 1
     2. Item 2
     3. Item 3
   • Item 2
   • Item 3