The HTML ordered lists are among the most used forms of lists on webpages. You might have seen pointers in serial order on many webpages. Well, those sequential series can be created using the ordered list tag in HTML.
Here, we will learn more about HTML ordered lists and their structure, syntax, use cases, and more.
The HTML Ordered Lists
The HTML ordered lists or <ol> tag is used to define an ordered list in a specific sequence of either numbers or letters. The elements inside the <ol> tag are listed using the simple <li> tags.
These lists are generally used for structured web content listing instructions, positions, step by step-by-step guides, daily routines, classifications, and more.
- The HTML ordered lists can be arranged in a specific numeric or alphabetical order.
- The ordered list begins with the <ol> tag and includes content inside using the <li> tags.
- You can use the type attribute for uppercase, lowercase, numbers, or Roman numbers listing.
- By default, the HTML ordered lists start from “1”, which you can easily modify using the start attribute.
- You can also build nested HTML ordered lists i,e. List inside list.
HTML Ordered Lists Syntax
The HTML ordered lists can be used with the <ol> tag. It begins with the <ol> tag and ends with the </ol> tag. The ordered lists in HTML consist of the list items, which are declared using the <li> tags.
| <ol>
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> |
Output
 |
The <ol>….</ol> HTML tags are used as a wrapper that tells the browser of the ordered list. While the list item is represented by the <li> tag.
Example of HTML Ordered Lists
Let us take a simple, real world example of an HTML ordered list for steps to make tea.
| <!DOCTYPE html>
<html> <head> <title>Basic Ordered List</title> </head> <body> <h2>Steps to Make Tea</h2> <ol> <li>Boil water</li> <li>Add tea leaves</li> <li>Pour in milk</li> <li>Add sugar</li> <li>Stir and serve</li> </ol> </body> </html> |
Output
 |
Different type Attributes in HTML Ordered Lists
We can use the type attribute in the <ol> tag to specify the type of ordered listing we want to build.
| Value | Descriptions |
| “1” | It is default type in ordered lists and will list items with numbers |
| “A” | It will list items in uppercase alphabetical order |
| “a” | It will list items in lowercase alphabetical order |
| “I” | It will list items in uppercase Roman numbers |
| “i” | It will list items with lowercase Roman numbers |
1. Numbered Ordered Lists
The numbered lists are used to prepare a list with numerical serial order. You simply have to specify the type in the <ol> tag. You can simply use the <ol> tag without specifying any type value, as it is a default listing.
| <!DOCTYPE html>
<html> <head> <title>Basic Ordered List</title> </head> <body> <h2>Steps to Make Tea</h2> <ol type = “1”> <li>Boil water</li> <li>Add tea leaves</li> <li>Pour in milk</li> <li>Add sugar</li> <li>Stir and serve</li> </ol> </body> </html> |
Output
|
2. Uppercase Letters HTML Ordered Lists
In this type of ordered listing, lists are arranged in sequence using the alphabet in uppercase format. You can specify this type within the <ol> tag.
| <!DOCTYPE html>
<html> <head> <title>Basic Ordered List</title> </head> <body> <h2>Steps to Make Tea</h2> <ol type=”A”> <li>Boil water</li> <li>Add tea leaves</li> <li>Pour in milk</li> <li>Add sugar</li> <li>Stir and serve</li> </ol> </body> </html> |
Output
 |
Read More: What Is Semantic HTML? Importance, Examples, and Best Practices
3. Lowercase Letters HTML Ordered Lists
This type of HTML ordered lists arrange the sequential order in lowercase alphabetical order.
| <!DOCTYPE html>
<html> <head> <title>Basic Ordered List</title> </head> <body> <h2>Steps to Make Tea</h2> <ol type=”a”> <li>Boil water</li> <li>Add tea leaves</li> <li>Pour in milk</li> <li>Add sugar</li> <li>Stir and serve</li> </ol> </body> </html> |
Output
 |
4. Uppercase Roman Number Ordered Lists
This type of ordered list is used to arrange the sequential order by setting it to “I” i,e. Capital Roman numbers.
| <!DOCTYPE html>
<html> <head> <title>Basic Ordered List</title> </head> <body> <h2>Steps to Make Tea</h2> <ol type=”I”> <li>Boil water</li> <li>Add tea leaves</li> <li>Pour in milk</li> <li>Add sugar</li> <li>Stir and serve</li> </ol> </body> </html> |
Output
 |
5. Lowercase Roman Numbers Ordered List
This ordered list is used to arrange the Roman numbers in lowercase format.
| <!DOCTYPE html>
<html> <head> <title>Basic Ordered List</title> </head> <body> <h2>Steps to Make Tea</h2> <ol type=”i”> <li>Boil water</li> <li>Add tea leaves</li> <li>Pour in milk</li> <li>Add sugar</li> <li>Stir and serve</li> </ol> </body> </html> |
Output
 |
Read More: HTML List & Ordered, Unordered, And Definition Lists With Examples
Attributes In HTML Ordered Lists
Let us check some major attributes of the HTML ordered lists below.
1. Type Attribute
This attribute is used to style the numbering of the list items. You can use numbers, letters, and Roman numerals. Check some of the possible values below.
| Value | Output |
| “1” | 1, 2, 3,…. |
| “A” | A, B, C,…. |
| “a” | a, b, c,…. |
| “I” | I, II, III,…. |
| “i” | i, ii, iii,…. |
2. Start Attribute
By default, the numbering in the HTML ordered lists starts from 1, which you can change using the “start” attribute. You can easily specify your own preferred starting value of the list.
For example, we are creating an ordered list with numbering starting from 5 in alphabetical format, along with their indexing in numerical value. Let us check how we can specify a starting point using the “start” attribute.
| <ol start=”5″>
<li>Fifth</li> <li>Sixth</li> <li>Seventh</li> </ol> |
Output
 |
3. reversed Attribute
This attribute in ordered lists is used to create a list in the reverse order i,e. Descending order.
| <ol reversed>
<li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> |
Output
 |
Are Global Attributes Supported With HTML <ol> tags?
Global attributes are supported with HTML ordered lists or any other HTML element tags. You can control the styling, accessibility, classification, title, and more of these global tags.
- id: You can use this attribute to assign a unique identifier to the list.
- Class: This can be used to add a class that can be used for styling the list.
- style: This attribute is used to apply inline CSS styles directly.
- lang: This attribute is used to specify the language of the element.
- dir: This global attribute can set the text direction either from left to right or right to left.
Learn Web Development with PW Skills
Become an expert web developer with the PW Skills Full Stack Web Development Course. Learn fundamentals of web development, advanced tools, and frameworks in this 6 months live training session.
The complete course consists of in-depth tutorials, practice exercises, module level assignments, real world projects, and more. Learn in the guidance of our dedicated faculty only on pwskills.com
HTML Ordered Lists FAQs
Q1. What are HTML Ordered Lists?
Ans: An HTML ordered list is a list of items arranged in a specific order. You can arrange the sequence in any order with types like letters, numbers, and Roman numbers.
Q2. How to organise a list in HTML?
Ans: You can use the <ol tag to arrange your list in a specific sequential order.
Q3. Can I nest lists in HTML?
Ans: You can nest a list in HTML, but take care of the depth, as more depth can cause confusion among users.
Q4. How can I create an ordered list in HTML?
Ans: You can create an ordered list using the ol> and </ol tags. You can specify the list items within these tags using the <li and </li tag notations.
