The <ol> and <li> Elements in HTML

The <ol> element is used to create an ordered list in HTML — meaning a list with numbers. Inside the <ol>, each item is added using the <li> tag.

Ordered lists are helpful when the sequence matters, such as:

1. Step-by-step instructions
2. Rankings
3. Procedures
4. Directions

Think of <ol> like a numbered list wrapper, and <li> as each individual step or point inside it.

📘 Example Code

Below is an HTML example showing a heading and a numbered list:

💡 This is what the code looks like inside an editor

🖥️ What This Will Look Like in a Browser

✅ Example output you would see on a webpage:

🧪 Time to Practise!

Now it’s your turn to create your own ordered list.

Try this example first:

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>

What To Do

✅ Type the code above in the editor below
✅ Click Test Code to see your numbered list
✅ Change the list text to your own ideas
✅ Try adding a heading above your list

Tip 💡

Use <ol> for anything that needs steps or order.
For simple bullet points (no order), use <ul> instead.
Lists help make information clean and easy to follow — and they’re used everywhere on websites.