Learn HTML – Part 18 – ol Tag – Creating Ordered Lists

The HTML ol tag is used to create ordered lists in a web page. Ordered lists display items in a numbered or sequential format.

Ordered lists are commonly used when the sequence or order of items is important.

What is the ol Tag in HTML?

The ol tag stands for Ordered List. It groups list items in a specific order, usually displayed as numbers.

Each item inside the list must be written using the li (List Item) tag.

Basic Syntax of ol Tag

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

The browser automatically numbers each list item.

Example – Simple Ordered List

<ol>
   <li>Install VS Code</li>
   <li>Create an HTML file</li>
   <li>Write basic structure</li>
</ol>

Output:

1. Install VS Code
2. Create an HTML file
3. Write basic structure

Common Use Cases of Ordered Lists

1. Step-by-step tutorials
2. Cooking recipes
3. Ranking lists
4. Instructions and procedures
5. Top 10 lists

Use ordered lists when the sequence matters. If the order does not matter, use the ul tag instead.

ul vs ol – Key Differences

Changing Number Types in Ordered Lists

You can change the numbering style using the type attribute.

<ol type="A">
   <li>Item One</li>
   <li>Item Two</li>
</ol>

Possible Values for type Attribute

• 1 – Numbers (default)
• A – Uppercase letters
• a – Lowercase letters
• I – Uppercase Roman numerals
• i – Lowercase Roman numerals

Conclusion

The HTML ol tag is used to create numbered lists where the order of items matters.

It works together with the li tag to display structured content clearly and sequentially.

What’s Next?

Now that you understand the ol tag, the next step is learning about the li tag, which is used to define individual list items inside ordered and unordered lists.

Next: Learn HTML – Part 19 – li Tag – List Items Explained →

Series: Learn HTML Series