How to Create a Numbered List in HTML

Use an ordered list when your items need a clear sequence. This is the best choice for step-by-step instructions, rankings, recipes, and any process where order matters.

What you’ll build or solve

You’ll learn how to create a numbered list in HTML using the <ol> tag with <li> items. You’ll also know how to keep the sequence clear and easy to follow.

When this approach works best

This approach is the right choice when the order of the items changes the meaning.

Common real-world scenarios include:

• Tutorial steps
• Recipes
• Installation instructions
• Top 10 rankings
• Multi-step forms

This is a bad idea when the order does not matter, such as feature lists or grouped links. In those cases, use <ul> instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add an <ol> with <li> items

Wrap the list inside <ol> and place each numbered item inside its own <li>.

<ol>
  <li>Open your editor</li>
  <li>Create index.html</li>
  <li>Save the file</li>
</ol>

For longer step-by-step processes, keep adding more <li> items inside the same <ol>.

<ol>
  <li>Install VS Code</li>
  <li>Create a project folder</li>
  <li>Add your HTML file</li>
  <li>Preview in the browser</li>
</ol>

What to look for:

• <ol> creates the numbered list container
• <li> creates each numbered step
• The browser adds numbers automatically
• Keep all related steps inside one list
• Use <ul> instead if the order does not matter

Examples you can copy

Tutorial steps

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
  <li>Add your first heading</li>
</ol>

Recipe steps

<ol>
  <li>Boil water</li>
  <li>Add pasta</li>
  <li>Cook for 8 minutes</li>
</ol>

Ranked list

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Common mistakes and how to fix them

Mistake 1: Forgetting <li> tags

What the reader might do:

<ol>
  Open VS Code
  Create index.html
</ol>

Why it breaks: plain text inside <ol> is not treated as proper numbered items.

Corrected approach:

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
</ol>

Mistake 2: Using <ul> for ordered steps

What the reader might do:

<ul>
  <li>Install VS Code</li>
  <li>Create a file</li>
</ul>

Why it breaks: the sequence is important, so bullets make the order less clear.

Corrected approach:

<ol>
  <li>Install VS Code</li>
  <li>Create a file</li>
</ol>

Mistake 3: Splitting one process into multiple <ol> blocks

What the reader might do:

<ol>
  <li>Step one</li>
</ol>
<ol>
  <li>Step two</li>
</ol>

Why it breaks: the numbering restarts and the process becomes harder to follow.

Corrected approach:

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Troubleshooting

If the numbers do not appear, check that the items are inside <li> tags.

If the list shows bullets instead, switch from <ul> to <ol>.

If numbering restarts unexpectedly, combine the steps into one ordered list.

If spacing looks wrong, check CSS rules that changed list-style or padding.

Quick recap

• Use <ol> to create a numbered list
• Put every item inside an <li> tag
• Keep all related steps in one list container
• Use <ul> when the order does not matter
• Check CSS if numbering or spacing disappears