Working with Ordered Lists and Numbering
If you’ve ever typed a list like 1., 2., 3. by hand in a document, you already understand the idea behind ordered lists. In HTML (the language used to build web pages), ordered lists let the browser do the numbering for you.
In this article, you’ll learn how to:
- Create basic numbered lists
- Change the numbering style (1, 2, 3 or a, b, c or i, ii, iii)
- Start numbering from a specific number
- Mix text and lists to create clean, readable content
No coding experience is needed. You can follow along with nothing more than a simple text editor and a web browser.
What is an ordered list?
An ordered list is just a list where the order matters. Examples:
- Step‑by‑step instructions
- A top‑10 ranking
- A recipe with numbered steps
In HTML, ordered lists use two main pieces:
<ol>— this means ordered list<li>— this means list item (one line in the list)
The browser automatically adds the numbers. You don’t type them yourself.
Getting set up (very simple)
You only need two tools:
- A text editor (Notepad on Windows, TextEdit on Mac in plain text mode, or any code editor)
- A web browser (Chrome, Firefox, Edge, Safari, etc.)
Create a new file and save it as lists.html. Then add this basic HTML structure:
<!-- lists.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My List Practice</title>
</head>
<body>
<!-- We'll put our examples here -->
</body>
</html>
Open this file in your browser (double-click it). Each time you change the file, save it and refresh the browser to see your changes.
Example 1: Your first ordered list
Let’s start with a simple numbered list of morning tasks.
Add this inside the <body> tag:
<h1>Morning Routine</h1>
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Have breakfast</li>
<li>Check messages</li>
</ol>
What’s happening here?
<h1>creates a big heading: Morning Routine<ol>tells the browser: "I’m starting an ordered (numbered) list"- Each
<li>is one step in the list </ol>ends the list
What you should see:
- Wake up
- Brush teeth
- Have breakfast
- Check messages
You didn’t type any numbers, but your browser shows them for you.
Try it yourself
Change one of the items. For example, replace Check messages with Go for a walk. Save the file and refresh the browser. Notice how the numbers update automatically if you add or remove items.
This is one of the biggest benefits of ordered lists: no renumbering by hand.
Example 2: Different numbering styles
HTML lets you easily change how the list is numbered. The type attribute on <ol> controls the style.
Common type values:
1— 1, 2, 3 (default)A— A, B, Ca— a, b, cI— I, II, III (uppercase Roman numerals)i— i, ii, iii (lowercase Roman numerals)
Add this below your first list in lists.html:
<h2>Numbering Styles</h2>
<!-- Default: 1, 2, 3... -->
<ol type="1">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
<!-- Uppercase letters: A, B, C... -->
<ol type="A">
<li>First choice</li>
<li>Second choice</li>
<li>Third choice</li>
</ol>
<!-- Roman numerals: i, ii, iii... -->
<ol type="i">
<li>Phase one</li>
<li>Phase two</li>
<li>Phase three</li>
</ol>
What you should see: three separate lists, each with a different numbering style.
Try it yourself
Change type="A" to type="a" and see how the letters switch from uppercase to lowercase. Try using type="I" for the Roman numeral list and compare the result.
This kind of control is useful when you write longer documents with sections, sub‑sections, and steps.
Example 3: Starting at a specific number
Sometimes you don’t want your list to start at 1.
For example, imagine your document is split into 2 pages. Page 1 has steps 1–3, and page 2 continues with steps 4–6. Instead of starting back at 1, you can tell the list where to start.
Use the start attribute on <ol>:
<h2>Continuing a List</h2>
<!-- This list starts at 4 instead of 1 -->
<ol start="4">
<li>Pack your bag</li>
<li>Lock the door</li>
<li>Leave the house</li>
</ol>
What you should see:
- Pack your bag
- Lock the door
- Leave the house
You didn’t write 4., 5., or 6. yourself. The browser did that based on start="4".
Try it yourself
Change start="4" to start="10" and refresh the page. Watch how the numbers update while your text stays the same.
This is really helpful when you split content or when some steps appear after a long explanation.
Example 4: Nested (step-with-substeps) lists
Sometimes you need steps inside steps. For example:
- Cook pasta
- Boil water
- Add salt
- Add pasta
You can create this by putting one list inside another. This is called a nested list.
Add this example to your file:
<h2>Recipe Steps with Substeps</h2>
<ol>
<li>
Prepare ingredients
<ol type="a">
<li>Wash vegetables</li>
<li>Chop onions</li>
<li>Measure spices</li>
</ol>
</li>
<li>
Cook the dish
<ol type="a" start="4">
<li>Heat oil in pan</li>
<li>Add onions and spices</li>
<li>Add main ingredients</li>
</ol>
</li>
<li>Serve and enjoy</li>
</ol>
What’s happening here?
- The outer
<ol>holds the main steps: 1, 2, 3 - Inside the first
<li>, we add another<ol type="a">for substeps: a, b, c - Inside the second
<li>, we add another<ol type="a" start="4">to continue from d, e, f
What you should see (roughly):
- Prepare ingredients
a. Wash vegetables
b. Chop onions
c. Measure spices - Cook the dish
d. Heat oil in pan
e. Add onions and spices
f. Add main ingredients - Serve and enjoy
Your browser may indent the inner lists slightly so it’s clear they are substeps.
Try it yourself
Change start="4" to start="1" in the second inner list. Notice how the substeps restart at a instead of continuing with d. Try changing type="a" to type="1" and see how that changes the look.
Nested lists are very powerful for writing instructions, outlines, or course content.
Common mistakes to avoid
Here are a few issues beginners often run into:
Forgetting closing tags
Every<ol>should have a matching</ol>. Every<li>should have a matching</li>. If your list looks strange, check that all tags are closed.Putting text outside list items
All list content should be inside<li>tags. Don’t write text directly under<ol>without wrapping it in<li>.Using numbers in the text
Let HTML handle the numbering. Don’t type1.or2.in the text of your<li>tags. If the order changes, your manual numbers won’t update.
Here’s a bad example and how to fix it.
Incorrect:
<ol>
1. <li>Wake up</li>
2. <li>Brush teeth</li>
</ol>
Correct:
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
</ol>
In the correct version, the browser adds the 1. and 2. for you.
Try it yourself: Create a mini “how-to” guide
Now it’s your turn to combine what you’ve learned.
- In your
lists.htmlfile, create a new section with a heading likeMy How-To Guide. - Write an ordered list of at least 5 steps that teach someone how to do something simple:
- Make a sandwich
- Start the day
- Prepare for an online meeting
- Or anything you like
- Add at least one nested list with lettered substeps.
- Experiment with
typeandstartto change how steps are numbered.
Here’s a small template you can fill in:
<h2>My How-To Guide: [Your Topic Here]</h2>
<ol>
<li>Step one description
<ol type="a">
<li>Substep a</li>
<li>Substep b</li>
</ol>
</li>
<li>Step two description</li>
<li>Step three description</li>
<li>Step four description</li>
<li>Step five description</li>
</ol>
Change the placeholder text to your own steps. Save and refresh to see your custom guide.
Quick recap and what’s next
You’ve just learned how to:
- Create basic ordered lists with
<ol>and<li> - Change numbering styles using the
typeattribute - Start lists from any number with the
startattribute - Nest lists to create steps and substeps
That’s a solid foundation for making clean, readable instructions on any web page. Each small list you build is a win, so take a moment to appreciate how far you’ve come.
Next, you might explore:
- Unordered lists (
<ul>) with bullet points - Styling your lists with CSS to change colors, fonts, and spacing
- Combining lists with images or links to build richer pages
For now, keep experimenting with different list structures. The more you play with ordered lists and numbering, the more natural HTML will start to feel.
