Menu
Lists & Tables

<ol> Ordered List

Numbered lists for steps, rankings, or anything sequential.

1Numbered Lists

<ol> creates a numbered list. Use start, reversed, and type to customize the numbering.

Example Code
css
<ol>
  <li>Boil water</li>
  <li>Add tea bag</li>
  <li>Wait 3 minutes</li>
</ol>

<ol start="5" type="A">
  <li>Step E</li>
  <li>Step F</li>
</ol>

2Put the element in context

An ordered list communicates a meaningful sequence, such as setup instructions. Its start and reversed attributes can adjust the sequence when appropriate. Do not turn an ordered procedure into an unordered group just to get a different marker appearance.

3Practice with a small page

Write a three-step setup procedure and test reading it out of order. Keep the list ordered if that loses meaning. Use CSS to adjust marker style while preserving the step sequence, and inspect a nested substep inside its parent item.

Finished reading?

Mark this topic as complete to track progress.