What Is An Ordered List?

An Ordered List is different from an unordered list because it automatically numbers the items according to a selected numbering scheme. Instead of bullets, the ordered list presents numbers or letters. Below is an example:

1. First Item
2. Second Item
3. Third Item

The numbers "1", "2", and "3" are placed on the list automatically. You don't have to type these numbers into the list. These lists are very nice when you're presenting a chronological order of events or other organized list.

Coding An Ordered List

The code for an ordered list is quite similar to the unordered list. The biggest difference is that the list items ( <li>s ) are nested in <ol> and </ol> tags. Here's the code for the list above:

<ol>

<li>First Item
<li>Second Item
<li>Third Item

</ol>

Remember that you don't have to include the numbering in the list's code. That's done for you by the viewer's browser when it renders the page.

Changing The Numbering Scheme

You are not stuck with the 1-2-3 numbering scheme. You can choose to use upper- or lower-case letters or Roman numerals. Below is an example using upper-case letters:

1. First Item
2. Second Item
3. Third Item

We pick a numbering scheme by adding the TYPE attribute and giving it an appropriate value. This is the same TYPE attribute that gives different bullets for unordered lists. Here's the code for the above lettered list:

<ol type="A">

<li>First Item
<li>Second Item
<li>Third Item

</ol>

In the above example the value "A" for TYPE selects upper-case letters as the numbering scheme. Click here for a sample page showing all of the numbering schemes and what value to use for TYPE to get them. This will open in a separate page.

The trick I use for remembering the values to put into TYPE is to use the first character in the type of numbering scheme I plan to use. I'd use "a" for lower-case letters, "1" for the default standard numbering scheme, etc.

Using The START Attribute

You don't have to start your ordered list's numbering scheme with the at the beginning of the numbering order. For the default TYPE="1" ordered list we could start the numbering at 100 by adding a second attribute:

<ol type="1" start="100">

<li>First Item
<li>Second Item
<li>Third Item

</ol>

The code above will produce the list below with the numbering beginning at 100.

100. First Item
101. Second Item
102. Third Item

It's important to note that the START attribute's value is always a number. If you wanted to start a lettered numbering scheme at "D" you'd have to use START="4", not START="D". ("D" is the 4^th letter of the English alphabet.) I usually have to count this out on my fingers. I have a lot of fingers.

This is also the first time we've used more than one attribute in a tag. Not much to it. Just make a space after the first attribute and add the second one. Attribute/value pairs are separated by a space.

Try out each numbering scheme a couple of times and we'll move on to nesting lists inside other lists. This makes a formal outline layout for your text.

To Next Beginning HTML Lesson

Back To Beginning HTML Index