Without lists the world may very well cease to function. No one would get any shopping done. "To-Do" lists would disappear along with any semblance of productivity.  Directions would become horribly muddled in paragraph form, and fancy key features, devoid of their lavish bullet points, would feel rather un-impressive, indeed.

In HTML, you have the choice of designing with "ordered lists" that are numbered or using unordered lists, which use bullet points to get your, um, point across.

Ordered Lists

Ordered lists require some kind of marker denoting a specific order. You can use numbers (1,2,3), letters, (A, B, C), or Roman numerals (I, II, III) if you want to get really swanky.  Ordered lists are made to be used when listed information is displayed in order of importance or as directions.

The two tags that you will use in your ordered lists are:

            <OL> and <LI>

          <OL> stands for "ordered list", and is used to start a list.

          <LI> stands for "list item", and is used to start any item in your list.

The list will automatically number itself. Nice, eh?

To make a list that reads:

  1. Get up
  2. Turn off alarm
  3. Go back to sleep

You would enter in the following code:


                        <LI> Get up </LI>

                        <LI> Turn off alarm </LI>

                        <LI> Go back to sleep </LI>


Notice that Ive indented the <LI> tags. Its not really necessary that you do so, but Ive done it for a reason. In a minute, the lists will get a bit more complicated and visual organization is important. Also take note that Ive closed the <OL> tag. This is very important; otherwise your browser will assume that everything after this list is also part of the list.


What if you want a list that says:

  1. Get up
  2. Eat food
    1. Open mouth
    2. Insert food
  3. Go back to bed

Youve basically got two lists here, right? One list contains "get up", "eat food", and "go back to bed". The other list contains "open mouth" and "insert food". The "open mouth, insert food" list will be built directly inside of the larger list.

When a list is built inside of another list it is said to be "nested". Actually, when any HTML code is built inside of code of the same type, the code is said to be nested. "Nested" is a pretty important term; youll see it more often later on.

To build the above "get up", "eat food", and "go back to bed" list with its nested sub-set:


                        <LI> Get up </LI>

                        <LI> Eat food </LI>


                                                <LI> Open mouth </LI>

                                                <LI> Insert food </LI>


                        <LI> Go back to bed </LI>


Notice that the "open mouth, insert food" subset is a completely different list. It has its own <OL> and </OL>. Closing each list is important. If you forgot to close the "open mouth, insert food" subset, the last point of the main list, "goes back to bed", would be included in the sub-set.

You dont have to tell the sub-set to use a different numbering style, it knows all on its own. Again, the indenting is done to keep track of where you are in the list, not because its required.

Sub-sets can have sub-sets, too. You can have as many sub-sets as you feel like.

Can you build the following list?:

  1. Take a web design course
  2. Feel really proud
  3. Get high paying job at
    1. Buy Porsche
    2. Retire

Go ahead, try to build the list. Practice is a good thing.

Okay, heres what the list would look like:


                        <LI> Build a list </LI>

                        <LI> Feel really proud </LI>

                        <LI> Get high paying job at </LI>


                                                <LI> Buy Porsche </LI>

                                                <LI> Retire </LI>



Dont forget to close the main list!

Try to build some lists on your own.

Changing the Way Lists are Numbered

"But Im proud of my Italian ancestry." You say, "Id rather use roman numerals." Never fear. You can make a list with numbers, letters, or roman numerals. You simply add a TYPE="modifier" to the <OL> tag. For example:

          <OL TYPE= "a"> (standard lettering, lowercase)

          <OL TYPE= "A"> (standard lettering, uppercase)

          <OL TYPE= "i"> (roman numerals, lowercase)

          <OL TYPE= "I"> (roman numerals, uppercase)

          <OL TYPE= "1"> (standard numbers)

Remember that when you close <OL TYPE= "I"> you only have to use </OL>

Can you make a list that looks like:

I.                   First Point

a.      Sub-Point


Bulleted list are used when points are important, but in no specific order. HTML capitalizes on the fact that bulleted lists are in no specific order, and calls them "unordered lists". The tag for ordered list was <OL>. What do you think the tag for an unordered list is? Thats right:


Other than the difference between <OL> and <UL> ordered and unordered lists work exactly the same way. Nesting is available in an unordered list. You can even nest an unordered list in an ordered list!

Go ahead and build this list:

1.      First thing.

         Bulleted sub-point

In HTML it would look like:


                        <LI> First thing. </LI>


                                                <LI> Bulleted sub-point </LI>




Unordered List Modifiers

Dont like those boring bullet points? Well, experiment with the following:

            <UL TYPE="circle">

            <UL TYPE="square">

            <UL TYPE="disk">

This is one of the only times that HTML is case specific. You have to write the unordered list types in lowercase or it wont work. Dont ask me why.

If youd like to use a graphic for a bullet point, you can do it, but you dont do it with a normal HTML list. You have to build the list from scratch. Youd need to place everything in a table. Lucky for you, youre learning tables next!   

NOTE: Youre probably not going to be building lists everyday, but the concept of "nesting" is very important, and will be used again later on. It is important that you understand the concept of nesting. Basically, you are nesting code when you start a tag inside the area affected by a tag of the same type.

In the following example, you see a nested <FONT> tag:


These words are green and size 5 


These words are red and size 5


These words are green and size 5


These words are neither green, nor size 5

Forward to Tables |

| Back to Courseware