By the end of this lesson, you will be able to create numbered lists using the <ol> element and understand when to use it instead of an unordered list.
What it is
An ordered list (<ol>) is a block-level HTML element used to represent a list of items where the sequence or ranking matters. Each item within the list is wrapped in an <li> (list item) tag. The browser automatically numbers these items sequentially (1, 2, 3...) unless styled otherwise via CSS.
Mental Model: Think of an ordered list as a recipe step-by-step guide or a top-ten chart. If swapping two items changes the meaning or validity of the content, you need an ordered list.
Related terms: Unordered List (<ul>), List Item (<li>), Nested Lists.
Why it matters
- Semantic Meaning: It tells search engines and assistive technologies (like screen readers) that the order of information is critical.
- Accessibility: Screen readers announce "List with X items" and read the number before each item, helping users track their position.
- Readability: Visual numbering helps users follow complex instructions or processes without losing their place.
- Structure: It provides a clear hierarchy for sequential data, such as steps in a tutorial or ranked results.
Syntax or steps
The basic structure requires an opening <ol> tag, one or more <li> tags inside, and a closing </ol> tag.
- Open the list with
<ol>. - Add each item inside
<li>tags. - Close the list with
</ol>.
Example
<ol>
<li>Preheat oven to 350°F.</li>
<li>Mix flour and sugar.</li>
<li>Bake for 20 minutes.</li>
</ol>Part-by-part explanation:
<ol>: Starts the ordered list container.<li>...</li>: Defines individual steps. The browser automatically adds "1.", "2.", and "3." before the text.</ol>: Ends the list container.
Common mistakes
- Using
<ol>for non-sequential data: Do not use ordered lists for bullet points like features or ingredients if the order doesn't matter. Use<ul>instead. - Manually typing numbers: Never write
<li>1. Step One</li>. Let the browser handle the numbering so it remains consistent if you add or remove items. - Missing
<li>tags: Text directly inside<ol>without<li>wrappers may render incorrectly or fail accessibility checks. - Nesting errors: When creating sub-lists, ensure the inner
<ol>or<ul>is placed inside the parent<li>, not after it.
When to use it
Choose between <ol> and <ul> based on whether the sequence is significant.
| Feature | Ordered List (<ol>) |
Unordered List (<ul>) |
|---|---|---|
| Sequence Importance | Critical (Step 1 must come before Step 2) | Irrelevant (Items are equal priority) |
| Visual Marker | Numbers (1, 2, 3) or Letters (A, B, C) | Bullets (•, ◦, ▪) |
| Best For | Instructions, rankings, timelines | Features, navigation menus, random facts |
Practice
Guided Exercise: Create an ordered list containing three steps to make a cup of tea: boil water, steep tea bag, pour into cup.
Challenge: Modify your code to start the numbering at 5 instead of 1 using the start attribute (e.g., <ol start="5">). Verify the output shows 5, 6, 7.
Quick check
Question: You are listing the main ingredients for a salad. Does the order matter? Should you use <ol> or <ul>?
Answer: The order usually does not matter for ingredients. You should use <ul> (unordered list).
Summary
The <ol> element is essential for presenting sequential information clearly and accessibly. Always prefer semantic HTML over manual formatting to ensure your content works well across devices and assistive technologies.