Ordered Lists (ol & li)
What is an Ordered List?
Imagine writing down the steps of a recipe. You have to crack the eggs *before* you bake the cake. The sequence of steps is critical.In HTML, an Ordered List is used for sequential lists where the order of items is important. The browser automatically numbers these items (1, 2, 3...) by default. We build them using:
<ol> (Ordered List): The outer container.<li> (List Item): The individual list items.You can customize the numbering using attributes:
start="value": Specifies the starting number (e.g., start="3" starts numbering at 3).type="type": Changes numbering type (e.g., type="A" for uppercase letters, or type="I" for Roman numerals).Why does it matter?
Ordered lists are perfect for step-by-step tutorials, recipes, rankings, or quizzes where the sequence determines the meaning.How to write it
<ol start="3">
<li>Step Three</li>
</ol>
1.
Step Item 1
2.
Step Item 2
Common Mistakes
<li>: Don't write <li>1. Step One</li>. The browser adds the numbers automatically. If you write the numbers yourself, you will end up with double numbering (e.g., "1. 1. Step One").Quick Reference
<ol> — Defines an ordered (numbered) list.start="number" — Offset starting count.type="1|a|A|i|I" — Numbering style selector.Your Task
Create an ordered list `<ol>` set to start count offset from '3' (`start="3"`). Add a single list item `<li>` containing the text 'Step Three'.
index.html
Type code above to start the lesson.
Live Preview