Français

<ol>

List steps, a ranking — order matters

— 1 min read

  • HTML
  • accessibility
  • semantics
  • lists

<ol> + <li> — The ordered list

The <ol> element represents an ordered list: a group of items whose order is significant. Each item is an <li>. The start, reversed and type attributes let you control the numbering.

When to use it

You want to display steps in a process, a ranking, a step-by-step tutorial, a recipe, or any content where sequence matters.

What you gain

Accessibility: screen readers announce the position of each item ("item 3 of 7"). The user knows where they are in the sequence without seeing the numbers.

Code example

<ol>
  <li>Clone the repository</li>
  <li>Install dependencies</li>
  <li>Run the development server</li>
</ol>
 
<h2>Top 3 finishers</h2>
<ol reversed>
  <li>Alice — 2h12</li>
  <li>Bob — 2h08</li>
  <li>Carol — 1h59</li>
</ol>

Further reading