HTML Site

Now, we go onto ordered and unordered lists. You can order them sunny-side up or whipped light and fluffy. Unfortunately, you can't order them that way. They get ordered automatically by the web browser and all you have to do is put in a single tag in order to auto-number them, good for listing the best sale at a store or whatever else you can think of. To start, you can make an unordered list. First, you have to tell the browser what type of list it is -- an Unordered List (which means each item is not in any specific order).

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<UL>
</UL>
</BODY>
</HTML>

Now, we need to give it List Items so it knows what there is to list.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<UL>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</UL>
</BODY>
</HTML>

And you'll see this as:

  • List Item 1
  • List Item 2
  • List Item 3

You probably see that LIs have no closing tag. It's not necessary as long as you keep starting new ones. For example,

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<UL>
<LI>List Item 1<LI>List Item 2<LI>List Item 3
</UL>
</BODY>
</HTML>

The same thing shows up as before. Now onto Ordered Lists. The computer automatically numbers these in the order it gets them. Let's test it out.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<OL>
<LI>List Item 1
<LI>List Item 3
</OL>
</BODY>
</HTML>

How do you think it shows up?

  1. List Item 1
  2. List Item 3

The computer is not psychic, so let's put List Item 2 back in there.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<OL>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>
</BODY>
</HTML>

The result is reordering things. In a morning to do list, you might have (Wake Up) (Brush Teeth) (Drink Coffee) and then decide you should have Drink Coffee in the middle, and you don't have be constantly renumbering. Now we can also change the way it orders, even to outline form like a table of contents by putting another OL or UL tag within under the appropriate heading.

  1. List Item 1
  2. List Item 2
  3. List Item 3

Additionally, you can modify the view of bullets in both lists. Let's start with an unordered list. You can use...

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<UL>
<LI TYPE=DISC>List Item 1
<LI TYPE=CIRCLE>List Item 2
<LI TYPE=SQUARE>List Item 3
</UL>
</BODY>
</HTML>

As you see in unordered lists, the LI bullet is able to be modified three ways, these 3 are Netscape-specific (though MSIE 4+ seems to have no problems with it), so other browsers may or may not interpret properly as this:

  • List Item 1
  • List Item 2
  • List Item 3

Now we'll work on ordered lists. You can do 5 things.

<LI TYPE=DISC>List Item 1
<LI TYPE=CIRCLE>List Item 2
<LI TYPE=SQUARE>List Item 3

As you see in unordered lists, the LI bullet is able to be modified three ways, these 3 are Netscape-specific, so other browsers may or may not interpret proprely as this:

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<OL>
<LI TYPE=1> Ordered: 1, 2, 3 (Numbers)
<LI TYPE=A> Ordered: A, B, C (Uppercase Letters)
<LI TYPE=a> Ordered: a, b, c (Lowercase Letters)
<LI TYPE=I> Ordered: I, II, III (Uppercase Roman Numerals)
<LI TYPE=i> Ordered: i, ii, iii (Lowercase Roman Numerals)
</OL>
</BODY>
</HTML>

Stealing this from WebMonkey, the following example uses a few of the above. Additionally, on nesting, there will be spaces extra in order to make it look neater. Many people follow this idea on their websites.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
<OL>
  <LI TYPE=I>Never give bell peppers on the first date
  <OL>
    <LI TYPE=A>Intention could be misinterpreted
    <OL>
      <LI TYPE=1>Widely known as lusty vegetable
      <LI TYPE=1>Viewed by some as symbol of warfare
    </OL>
  </OL>
</OL>
</BODY>
</HTML>

Now we see our results:

  1. Never give bell peppers on the first date
    1. Intention could be misinterpreted
      1. Widely known as lusty vegetable
      2. Viewed by some as symbol of warfare

Now we'll use an example of nesting lists from WebMonkey for humourous content.

<HTML>
<HEAD>
<TITLE>Title of Website</TITLE>
</HEAD>
<BODY>
Animals That Make Poor Office Pets:
<UL>
  <LI>Chickens
  <OL>
    <LI>difficult to house train
    <LI>lay eggs in weird places
  </OL>
  <LI>Llamas
  <OL>
    <LI>always spitting
    <LI>can't sit in your lap while you work
  </OL>
  <LI>Pigs
  <OL>
    <LI>can up-end a desk with a toss of the head
    <LI>need office mudhole (maybe that's a plus?)
  </OL>
</UL>
</BODY>
</HTML>

Combining ordered and unordered lists nested in each other, we get...

Animals That Make Poor Office Pets:
  • Chickens
    1. difficult to house train
    2. lay eggs in weird places
  • Llamas
    1. always spitting
    2. can't sit in your lap while you work
  • Pigs
    1. can up-end a desk with a toss of the head
    2. need office mudhole (maybe that's a plus?)

Advanced Links:

Legibility
META Tags
1