HtmlHow-ToBeginner · 3 min read

How to Create Ordered List in HTML: Simple Guide

To create an ordered list in HTML, use the <ol> tag to start the list and <li> tags for each item. The browser automatically numbers the items in order.

📐

Syntax

An ordered list starts with the <ol> tag and ends with </ol>. Each list item is wrapped in <li> tags. The browser numbers the items automatically.

html

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output

1. First item 2. Second item 3. Third item

💻

Example

This example shows a simple ordered list with three items. The browser will display the list with numbers starting from 1.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ordered List Example</title>
</head>
<body>
  <h2>My Shopping List</h2>
  <ol>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
  </ol>
</body>
</html>

Output

My Shopping List 1. Milk 2. Bread 3. Eggs

⚠️

Common Pitfalls

One common mistake is using <ul> (unordered list) instead of <ol> when you want numbers. Another is forgetting to close the <li> tags, which can break the list display.

html

<!-- Wrong: Using unordered list for numbered list -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

<!-- Right: Using ordered list -->
<ol>
  <li>Item one</li>
  <li>Item two</li>
</ol>

Output

• Item one • Item two 1. Item one 2. Item two

📊

Quick Reference

Tag	Description
	Starts an ordered (numbered) list
	Defines a list item inside or
	Ends the ordered list
type attribute	Changes numbering style (e.g., numbers, letters)

✅

Key Takeaways

Use

for each item.

The browser automatically numbers the list items in order.

Do not confuse

, which creates bullet lists.

Always close your

tags to avoid display issues.

You can customize numbering style with the type attribute.