Ordered List in HTML
This list is created by using <ol> tag. Any series can be used to order the elements, like series of digits, alphabets, roman numerals, etc. All these series gets increased by one with every new element entered in the list.
Ex.-For a numbered order list, the numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. Have a look at the example below to understand the concept properly.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Output
- Audi
- Mercedes
- Lamborghini
Ordered list Type Attribute
type attribute is used to change the series type.| Value | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default). |
| type="A" | The list items will be numbered with uppercase letters. |
| type="a" | The list items will be numbered with lowercase letters. |
| type="I" | The list items will be numbered with uppercase roman numbers. |
| type="i" | The list items will be numbered with lowercase roman numbers. |
List of Numbers
Numbers as type - <ol type="1">. Here the numbers will be used to order the elements. Each new element will get incremented value from the previous one in the list.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Output
- Audi
- Mercedes
- Lamborghini
Uppercase
Uppercase alphabets as type - <ol type="A">. Here, Uppercase alphabets will be used to order the elements.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase </title>
</head>
<body>
<ol type="A">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Output
- Audi
- Mercedes
- Lamborghini
Lowercase
Lowercase alphabets as type - <ol type="a">. Same as above, but the alphabets will be lowercased.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase </title>
</head>
<body>
<ol type="a">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Output
- Audi
- Mercedes
- Lamborghini
Uppercase Roman Numbers
Uppercase roman numbers as type <ol type="I">.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase Roman </title>
</head>
<body>
<ol type="I">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Output
- Audi
- Mercedes
- Lamborghini
Lowercase Roman Numbers
Lowercase roman numbers as type<ol type="i"><html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase Roman </title>
</head>
<body>
<ol type="i">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Output
- Audi
- Mercedes
- Lamborghini
The "Start" Attribute
The start attribute is used to control the counting in the list. By default, the counting starts from '1' or from 'a', but we can change counting to start from a specified number or alphabet. Look at the example below to see the syntax of using this attribute.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Ordered List Start Attribute </title>
</head>
<body>
<ol start="50">
<li>Samsung</li>
<li>OnePlus</li>
<li>Nokia</li>
</ol>
<ol type="I" start="50">
<li>Oppo</li>
<li>Vivo</li>
<li>Xiaomi</li>
</ol>
</body>
</html>
Output
- Samsung
- OnePlus
- Nokia
- Oppo
- Vivo
- Xiaomi
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<ol> |