Ordered Lists in HTML (<ol>)

Learn to create numbered lists for instructions, rankings, and more. When order matters, <ol> is your best friend.

🔢

Welcome! Today, we'll learn to make numbered lists, perfect for recipes or step-by-step guides.

/* Let's begin with Ordered Lists... */

The <ol> Tag: The Container

The <ol> tag, short for "ordered list," is the main container. You must wrap all your list items inside this tag. By default, the browser will number the items starting with 1, 2, 3, and so on.

The <li> Tag: The List Item

Each individual item within an ordered list is created with the <li> tag, which stands for "list item." You can have as many <li> elements inside an <ol> as you need.

Customizing Lists: Attributes

You can customize ordered lists with attributes. The type attribute changes the numbering style (e.g., type="A" for letters, type="i" for Roman numerals). The start attribute lets you begin the count from a number other than 1 (e.g., start="5").

Practice Zone

Interactive Test 1: Build a List

Drag the tags to build a correct ordered list for a morning routine.

Arrastra en el orden correspondiente.


Arrastra las opciones:

<ol>
<li>Wake up</li>
<li>Brush teeth</li>
</ol>

Completa el código:

______
______
______
______
Unlock with Premium

Interactive Test 2: Name the Tags

Rellena los huecos en cada casilla.

<>
  <>First item</>
  <>Second item</>
</>
Unlock with Premium

Practice Example: Code Editor

Create an ordered list of the top three fastest land animals: Cheetah, Pronghorn, and Springbok.

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

<ol> <li>Cheetah</li> <li>Pronghorn</li> <li>Springbok</li> </ol>
Unlock with Premium

Knowledge Check

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


Unlock with Premium

Ordered vs. Unordered Lists: Which to Choose?

HTML gives you two primary ways to create lists: ordered (<ol>) and unordered (<ul>). The one you choose depends entirely on your content's meaning.

1. Ordered Lists (<ol>): When Sequence Matters

Use an ordered list when the sequence of the items is crucial. Changing the order would change the meaning. The browser displays these with numbers by default.

Perfect for:

  • Step-by-step instructions (like a recipe).
  • Top 10 rankings or leaderboards.
  • Turn-by-turn directions.
  • Legal document clauses.
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

2. Unordered Lists (<ul>): When Order Doesn't Matter

Use an unordered list when the items are related, but their sequence has no importance. The browser displays these with bullet points by default.

Perfect for:

  • A list of product features.
  • A shopping list.
  • Website navigation links.
  • Key takeaways in an article.
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>
Practical Takeaway: Before creating a list, ask yourself: "If I reorder these items, does the meaning change?" If the answer is yes, use <ol>. If it's no, use <ul>.

HTML Lists Glossary

<ol>
The "Ordered List" element. It's the container for a list where the sequence of items is important. It creates a numbered list.
<ul>
The "Unordered List" element. The container for a list where sequence does not matter. It creates a bulleted list.
<li>
The "List Item" element. Used inside both <ol> and <ul> to define each individual item in the list.
type="..."
An attribute for the <ol> tag. It changes the marker style. Values include "1" (default), "A", "a", "I", and "i".
start="..."
An attribute for the <ol> tag. It specifies the starting number for the list (e.g., start="3" begins the list at 3).
reversed
A boolean attribute for the <ol> tag. If present, it makes the list's numbering count down instead of up.