HTML ordered lists <ol> use normal numbers by default but it’s also possible to use lower or upper case letters (i.e. a b c and A B C) and roman numbers in upper or lower case (i.e. i ii iii and I I III) by using the "type" attribute.
The default – normal Arabic numbers
Here’s an example of a default ordered list:
- Apples
- Bananas
- Oranges
And the HTML behind it:
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
Lower and upper case letters
To make the ordered list show letters instead of numbers, specify type="A" for uppercase and type="a" for lowercase letters in the <ol> element. Here’s an example of an ordered list using uppercase letters:
- Apples
- Bananas
- Oranges
And the HTML behind it:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
Lower and upper case Roman numbers
To use Roman numbers instead, specify type="I" for uppercase Roman numbers (e.g. I II III IV V etc) and type="i" for lowercase Roman numbers (e.g. i ii iii iv v). Here’s an example of an ordered list using lowercase Roman numbers:
- Apples
- Bananas
- Oranges
And the HTML behind it:
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
Combining them together
Let’s say you want to have a table of contents with numbers for the main items and then lower case letters for the subitems. Here’s an example:
- Fruit
- Apples
- Bananas
- Oranges
- Vegetables
- Carrots
- Lettuce
- Cucumbers
And the HTML behind it:
<ol>
<li>Fruit
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
</li>
<li>Vegetables
<ol type="a">
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumbers</li>
</ol>
</li>
</ol>
Starting with a number other than 1
My next HTML post looks at how to start an HTML ordered list with a number other than 1.