HtmlHow-ToBeginner · 3 min read

How to Create Numbered List in HTML: Simple Guide

To create a numbered 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

The <ol> tag defines an ordered (numbered) list. Inside it, each list item is wrapped in a <li> tag. The browser numbers these items automatically.

<ol>: Starts the numbered list.
<li>: Defines each item in the list.
</ol>: Ends the numbered list.

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 numbered list with three items. The browser will display numbers automatically before each item.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Numbered List Example</title>
</head>
<body>
  <h2>My Numbered List</h2>
  <ol>
    <li>Wake up early</li>
    <li>Eat breakfast</li>
    <li>Go for a walk</li>
  </ol>
</body>
</html>

Output

1. Wake up early 2. Eat breakfast 3. Go for a walk

⚠️

Common Pitfalls

Some common mistakes when creating numbered lists include:

Using <ul> (unordered list) instead of <ol>, which shows bullets instead of numbers.
Forgetting to close the <ol> or <li> tags, causing display issues.
Trying to number items manually instead of letting the browser handle it.

html

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

<!-- Right way: 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

Remember these tips for numbered lists:

Use <ol> for numbered lists.
Use <li> for each list item.
Close all tags properly.
Customize numbering with attributes like start if needed.

✅

Key Takeaways

Use

for each item inside it.

The browser automatically numbers the list items in order.

Avoid using

if you want numbers instead of bullets.

Always close your

tags properly to avoid display errors.

You can customize numbering with attributes like start on the

tag.