Ordered Lists in HTML

Learn to create numbered lists in HTML using the <ol> and <li> tags, perfect for steps, rankings, and sequential information.

Creating Ordered Lists

When the order of items is important, like in a recipe or a top-10 list, you use an ordered list. Let's learn how to create these numbered lists in HTML.

Syntax

The structure consists of a main <ol> tag that wraps all the list items. Each item is then defined by its own <li> tag, and the browser automatically numbers them.

Purpose

Ordered lists are ideal for content where the sequence is important, such as step-by-step instructions, recipes, legal clauses, or top-10 rankings.

Practice Zone


Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

<li>Second item</li>
<li>First item</li>
<li>Third item</li>
</ol>
<ol>

Completa el código:

______
______
______
______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<ol>
  <li></li>
  <li></li>
</ol>

Practice Example: Code Editor

Create an ordered list with the three steps to make a cup of tea: "Boil water", "Add tea bag", "Pour water in cup".

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<ol> <li>Boil water</li> <li>Add tea bag</li> <li>Pour water in cup</li> </ol>

Knowledge Check

Which tag is used to define an ordered (numbered) list?