HTML Ordered List

The ordered list start with <ol> tag and list items start with <li> tag.

All the lists in HTML are marked with numbers by default.

HTML Ordered List is also known as Numbered List.

Types of Ordered List

Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)

Type	Description
`1`	This is the default type of ordered list. In this type, the list items are numbered with numbers.
`I`	The list items are numbered with upper case roman numbers.
`i`	The list items are numbered with lower case roman numbers.
`A`	The list items are numbered with upper case letters.
`a`	The list items are numbered with lower case letters.

Example of HTML Ordered List

In this below example of HTML ordered list that displays 4 topics in numbered list and we are not defining type="1" because it is the default type.

HTML
OUTPUT

<ol>  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Ordered List `type="I"`

The below example indicates how the list display in roman number uppercase.

HTML
OUTPUT

<ol type="I" >  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Ordered List `type="i"`

The below example indicates how the list display in roman number lowercase.

HTML
OUTPUT

<ol type="i" >  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Ordered List `type="A"`

The below example indicates how the list display in alphabet uppercase.

HTML
OUTPUT

<ol type="A" >  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Ordered List `type="a"`

The below example indicates how the list display in alphabet lowercase.

HTML
OUTPUT

<ol type="a" >  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Start Attribute in Ordered List

The start attribute is used to specify from where to start the list items in order with ol tag.

Example :

<ol type="1" start="5"> : It will display numeric values starting with "5".

<ol type="A" start="5"> : It will display capital alphabets starting with "E".

<ol type="a" start="5"> : It will display lower case alphabets starting with "e".

<ol type="I" start="5"> : It will display Roman upper case value starting with "V".

<ol type="i" start="5"> : It will display Roman lower case value starting with "v".

HTML
OUTPUT

<ol type="i" start="5" >  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Reversed Attribute in Ordered List

As it named indicates it's a boolean attribute of HTML <ol> tag and it's introduced in HTML5 version.

if we used the reversed attribute with tag then it will show the numbered the list in descending order (7, 6, 5, 4......1).

<ol reversed >  
 <li>HTML</li>  
 <li>CSS</li>  
 <li>JavaScript</li>  
 <li>PHP</li>  
</ol>

Try it Yourself

Element	Chrome	IE	Firefox	Opera	Safari
<ol>	Yes	Yes	Yes	Yes	Yes

HTML Tutorial