More List Tags : Ordered Lists

Lets move on to the Ordered List. It requires a pair of tags <ol> and </ol>.

Each entry in the ordered list is also enclosed within a list item <li> </li> tag pair.

Your HTML will look like this:

Home Depot List:
<ol>
<li>10' - 2 x 4s (24) </li>
<li>Circular saw </li>
<li>Hammer </li>
<li>Box of nails </li>
</ol>

On your web page it will look like this:

Home Depot List:

1. 10' - 2 x 4s (24)
2. Circular saw
3. Hammer
4. Box of nails

The Ordered List automatically uses Arabic numerals (1, 2, 3, etc). You can use other attributes to change to a alternate ordering system. Try type="A" or type="I". See the lecture for other possible type attributes.

Here is the same list again with <ol type="A"> in the opening tag.

Home Depot List:

1. 10' - 2 x 4s (24)
2. Circular saw
3. Hammer
4. Box of nails

You can also change the starting number or letter... start="x" (where x = the starting number or letter). That way it can start on a number other than #1 or a letter other than A.

For example <ol type="A" start="3"> results in:

3. 10' - 2 x 4s (24)
4. Circular saw
5. Hammer
6. Box of nails

Experiment with nesting Ordered Lists. Use the same formula we used in the last demo. Just imagine what you can do with Ordered Lists!