Path = Home : HTML Design Tips : How To Customize Your Ordered Lists

How To Customize Your Ordered Lists

The <ol> tag is used to create a numbered ordered list.

Ordered list with numbers

<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>

1. Item 1
2. Item 2
3. Item 3

Ordered list with lowercase letters

To display your list with lowercase letters (a,b,c) instead of numbers (1,2,3) add <type="a"> to the <ol> tag.

<ol type="a">
<li>Item 1
<li>Item 2
<li>Item 3
</ol>

1. Item 1
2. Item 2
3. Item 3

Ordered list with uppercase letters

To display your list with uppercase letters (A,B,C) add <type="A"> to the <ol> tag.

<ol>
<li type="A">Item 1</li>
<li type="A">Item 2</li>
<li type="A">Item 3</li>
</ol>

1. Item 1
2. Item 2
3. Item 3

Ordered list with lowercase Roman numerals

To display your list with lowercase Roman numerals (i,ii,iii), add <type="i"> to the <ol> tag.

<ol type="i">
<li>Item 1
<li>Item 2
<li>Item 3
</ol>

1. Item 1
2. Item 2
3. Item 3

Ordered list with uppercase Roman numerals

To display your list with uppercase Roman numerals (I,II,III), add <type="I"> to the <ol> tag.

<ol>
<li type="I">Item 1</li>
<li type="I">Item 2</li>
<li type="I">Item 3</li>
</ol>

1. Item 1
2. Item 2
3. Item 3