HTML Ordered List | HTML Numbered
List
HTML Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. We can use ordered list to represent items either
in numerical order format or alphabetical order format, or any format where an order is
emphasized. There can be different types of numbered 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)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type Description
Type This is the default type. In this type, the list items are numbered with
"1" numbers.
Type "I" In this type, the list items are numbered with upper case roman numbers.
Type "i" In this type, the list items are numbered with lower case roman numbers.
Type In this type, the list items are numbered with upper case letters.
"A"
Type In this type, the list items are numbered with lower case letters.
"a"
HTML Ordered List Example
Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here
we are not defining type="1" because it is the default type.
1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="I"
1/4
Let's see the example to display list in roman number uppercase.
1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
I. HTML
II. Java
III. JavaScript
IV. SQL
ol type="i"
Let's see the example to display list in roman number lowercase.
1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
i. HTML
ii. Java
iii. JavaScript
iv. SQL
ol type="A"
Let's see the example to display list in alphabet uppercase.
1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
A. HTML
B. Java
C. JavaScript
D. SQL
ol type="a"
Let's see the example to display list in alphabet lowercase.
2/4
1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
a. HTML
b. Java
c. JavaScript
d. SQL
start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".
<ol type="i" start="5"> : It will show Roman lower case value starting with "v".
1. <ol type="i" start="5">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
v. HTML
vi. Java
vii. JavaScript
viii. SQL
reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use
the reversed attribute with
tag then it will numbered the list in descending order (7, 6, 5, 4......1).
Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
3/4
6. </ol>
Output:
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<ol> Yes Yes Yes Yes Yes
4/4
