Home | About Chris Hope | Contact Chris Hope | Search:

How to use letters and roman numerals instead of numbers in an HTML ordered list

Posted October 3rd, 2009 in HTML and CSS

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:

1. Apples
2. Bananas
3. 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:

1. Apples
2. Bananas
3. 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:

1. Apples
2. Bananas
3. 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:

1. Fruit
   1. Apples
   2. Bananas
   3. Oranges
2. Vegetables
   1. Carrots
   2. Lettuce
   3. 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.

Comments

blog comments powered by Disqus