When the order in a list matters (like a step-by-step instruction or a ranking), you use an ordered list instead of <ul>: <ol> ("ordered list").

<ol>: ordered list

<ol>
  <li>Put on your shoes</li>
  <li>Walk to the training pitch</li>
  <li>Warm up</li>
  <li>Start training</li>
</ol>

The structure is identical to <ul> - only <li> is allowed directly inside - but the browser automatically shows numbers (1, 2, 3, ...) instead of dots, because order matters here.

Finn's pre-game routine

Add an ordered list with Finn's preparation before a game:

<h2>My Pre-Game Preparation</h2>
<ol>
  <li>Wake up well rested</li>
  <li>Eat a good breakfast</li>
  <li>Pack my football bag</li>
  <li>Get to the pitch on time</li>
  <li>Warm up with the team</li>
</ol>

<dl>: description list

There's a third, less well-known kind of list: the description list <dl>. It's suited for term-explanation pairs, like a small glossary. It uses two new elements instead of <li>:

• <dt> ("description term"): the term
• <dd> ("description details"): the explanation of it

<dl>
  <dt>Offside</dt>
  <dd>When an attacker is closer to the opponent's goal than the second-to-last
    defender at the moment the ball is played.</dd>

  <dt>Penalty</dt>
  <dd>A shot from 11 metres away, awarded after a foul inside the penalty area.</dd>
</dl>

Add Finn's own small football glossary:

<h2>My Little Football Glossary</h2>
<dl>
  <dt>Offside</dt>
  <dd>When an attacker is closer to the opponent's goal than the second-to-last
    defender at the moment the ball is played.</dd>

  <dt>Penalty</dt>
  <dd>A shot from 11 metres away, awarded after a foul inside the penalty area.</dd>
</dl>

Quick recap: three kinds of lists

• <ul>: order doesn't matter, dots in front (e.g. hobbies)
• <ol>: order matters, numbers in front (e.g. a set of instructions)
• <dl>: term and explanation as a pair (e.g. a small glossary)