HTML Lists 
       
                   

Lists In HTML

One of the simplest, and most used structures in HTML is the list. There are two types of lists, the ordered list and the un-ordered list. The only difference between these two is that the list items in an ordered list are numbered and the elements in an un-ordered list are bulleted.
The general syntax for an unordered list is: 

<UL>
<LI>HTML code  
<LI>HTML code
  .  
  .
  .
<LI>HTML code
</UL>
The <LI> tag stands for List Item, which defines the beginning of the code you wish to be entered in the list. The end is defined by the <LI> tag of the next item in the list. Where HTML code appears in the above example, any type of HTML can appear. This means that you may put a link here, an image, plain text, or start another list. You must also observe that there can be an arbitrary number of elements in the list.

Example: 

<UL>
<LI>This is the first element of the list.
<LI>Click for a picture of 
	<A HREF = "centauri2.jpg">Centauri</A>.
<LI><IMG SRC = "centauri2.jpg">
</UL>
  • This is the first element of the list.
  • Click for a picture of Centauri.

The ordered list works in exactally the same way as the unordered. The only difference is the <UL> is changed to <OL>. Notice in the next example that the only difference is the <UL> is changed to <OL>

Example: 

<OL>
<LI>This is the first element of the list.
<LI>Click for a picture of 
	<A HREF = "centauri2.jpg">Centauri</A>.
<LI><IMG SRC = "centauri2.jpg">
</OL>
  1. This is the first element of the list.
  2. Click for a picture of Centauri.

As I alluded to when fist talking about lists, you can nest them, or have a list within a list. This is how I made the table of contents to this tutorial. You can mix ordered and un-ordered lists, sometimes making very complex nesting lists. It is important to know your limits. A list with more than three nesting levels becomes too hard to make out, and the organization that you where trying to get with the list is gone. When making a nested list, a <OL> or <UL> tag is used after the <LI> tag.

Example: 

<OL>
  <LI>This list begins as an ordered list.
  <LI>Then it changes to un-ordered 
    <UL>
      <LI>This is an unordered sub list
      <LI>Don't forget the closing list tag
    </UL>
  <LI> Now we are back to ordered
    <OL>
      <LI>It is also a good idea to indent
      <LI>your sub-lists to keep track of them
    </OL>
  <LI>Finally, this list is completed
</OL>
  1. This list begins as an ordered list.
  2. Then it changes to un-ordered
    • This is an unordered sub list
    • Don't forget the closing list tag
  3. Now we are back to ordered
    1. It is also a good idea to indent
    2. your sub-lists to keep track of them
  4. Finally, this list is completed

The bullets used will depend on the system that is displaying your page, so do not count on a bullet being a specific shape. Also, as you nest your un-ordered lists, the bullets will change to add some contrast to your list.

Netscape Extensions

Netscape also supplies some added functions to your lists. This added functionality comes in the form of parameters which can change the labeling of your lists. By using START as a parameter inside the <OL> tag, you can specify which number to start counting at in you lists. The argument can be any integer. The other parameter than can be used is TYPE, which defines what will actualy be used to number the elements. The argument can be 'I' or 'i' for uppercase or lowercase roman numerals, 'A' or 'a' for uppercase and lowercase alphabetic, and '1' for the default Arabic numerals.

Example: 

Things to Do
<OL START = 20>
<LI>Study
<LI>Eat 
<LI>Study
</OL>
Things to Do
  1. Study
  2. Eat
  3. Study Some More 
Things to Do
<OL TYPE = i>
<LI>Study
<LI>Eat 
<LI>Study
</OL>
Things to Do
  1. Study
  2. Eat
  3. Study Some More

TYPE can also be used with un-ordered lists. In this case, the type of bullet is what is changed. The arguments for TYPE with an un-ordered list are 'DISC,' which displays a filled circle, 'CIRCLE,' which displays an open circle and 'SQUARE,' which displays an outlined square. 

Things to Do
<UL TYPE = DISC>
<LI>Study
<LI>Eat 
<LI>Study
</UL>
Things to Do
  • Study
  • Eat
  • Study Some More 
Things to Do
<UL TYPE = SQUARE>
<LI>Study
<LI>Eat 
<LI>Study
</UL>
Things to Do
  • Study
  • Eat
  • Study Some More

You may also come along a case where you will need to skip a number in your ordered lists, or for some reason change the type of bullet in the middle of an un-ordered list. To do this, Netscape will accept the parameters TYPE and VALUE on the <LI> tag. TYPE does exactally what it did with the <UL> tag and VALUE simply changes the list item's numbered value.

Example: 

Classes Offered:
<OL START = 301>
   <LI>Introductory HTML 
   <LI VALUE = 406>Java Programming 
   <LI>Advanced Windows Applications
</OL>
Classes Offered:
  1. Introductory HTML
  2. Java Programming
  3. Advanced Windows Applications 
Things to Do
<UL>
<LI>
<LI TYPE = DISC>Study
<LI TYPE = SQUARE>Eat 
<LI TYPE = CIRCLE>Study
</UL>
Things to Do
  • Eat
  • Study
  • Eat
  • Study Some More