MAT 125: Demos for Exercises

Exercise 2 Demo: Part B : Ordered Lists

Ordered Lists work with letters and numbers.

More List Tags : Ordered Lists

The Ordered List 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:

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

Experiment with nesting Ordered Lists. There is a video that covers this on the Video Page It is similar to we used in the last demo. Just imagine what you can do with Ordered Lists!

Go to Part C of Demo 2.