Ordered Lists: <ol>

An ordered list works exactly like an unordered list — a container and items — but the browser automatically numbers the items. Use it whenever sequence matters.

<ol> and <li>

<ol> stands for ordered list. Like <ul>, it wraps the list items. The only difference is that the browser renders numbered steps instead of bullets.

<ol>
  <li>Fill a water bottle</li>
  <li>Check the weather forecast</li>
  <li>Pack your bag</li>
</ol>

The numbers are automatic — you do not write them in the HTML. If you add or remove an item, the browser renumbers everything for you.

<ul> vs <ol>

	<ul>	<ol>
Renders as	Bullet points	Numbers
Use when	Order does not matter	Order matters
Example	A packing list	Steps in a recipe

The same <li> element is used in both. The container — <ul> or <ol> — is what changes the rendering and meaning.

<!-- Unordered — items can be in any order -->
<ul>
  <li>Sunscreen</li>
  <li>Hat</li>
  <li>Water bottle</li>
</ul>

<!-- Ordered — steps must happen in sequence -->
<ol>
  <li>Apply sunscreen</li>
  <li>Put on your hat</li>
  <li>Fill your water bottle</li>
</ol>

Ordered list inside semantic structure

Like <ul>, an <ol> belongs inside a semantic container:

<section>
  <h2>Before You Leave</h2>
  <p>Complete these steps before heading out:</p>
  <ol>
    <li>Check the trail conditions</li>
    <li>Tell someone your planned route</li>
    <li>Charge your phone</li>
  </ol>
</section>

The type attribute

By default, <ol> uses decimal numbers (1, 2, 3…). The type attribute changes the marker style:

type value	Renders as
1 (default)	1, 2, 3
a	a, b, c
A	A, B, C
i	i, ii, iii
I	I, II, III

<ol type="a">
  <li>First</li>
  <li>Second</li>
</ol>

This is rarely needed in practice — CSS handles visual styling later — but it is useful to know it exists.

Exercise

Open index.html in VS Code.

Find a <section> where you could add a set of steps or a sequence. If none of your existing sections have a natural step-by-step flow, add a new <section> with a relevant heading.

1. Inside the section, add an <ol> with at least three <li> items.
2. Write the items as sequential steps — each one builds on the last.

Example:

<section>
  <h2>Getting Started</h2>
  <p>Follow these steps to prepare for your first outing:</p>
  <ol>
    <li>Research beginner-friendly trails in your area</li>
    <li>Gather basic gear: boots, water, and a snack</li>
    <li>Check the weather forecast the night before</li>
    <li>Let someone know where you are going</li>
  </ol>
</section>

3. Save and open index.html in your browser. The items should appear numbered.

Recap

• <ol> creates a numbered list. <li> is still each item inside it.
• Use <ol> when the order of items matters — steps, sequences, rankings.
• The browser numbers items automatically. Adding or removing an <li> renumbers the rest.
• Use <ul> when order does not matter; use <ol> when it does.