Practice: HTML Text Fundamentals

Ordered List

Ordered lists are lists in which the order of the items does matter. Let's take a set of directions as an example:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>:

<ol>
   <li>Drive to the end of the road</li>
   <li>Turn right</li>
   <li>Go straight across the first two roundabouts</li>
   <li>Turn left at the third roundabout</li>
   <li>The school is on your right, 300 meters up the road</li>
 </ol>

Active learning: Marking up an ordered list

Try editing the live sample below to create your very own HTML ordered list.

Live output

Editable code

Press Esc to move focus away from the code area (Tab inserts a tab character).

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our GitHub repo.