How to use letters and roman numerals instead of numbers in an HTML ordered listHow 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.

Related posts:

Comments

blog comments powered by Disqus