Ordered lists

Build ordered lists with <ol> and the start and type attributes.

What is an ordered list?

An ordered list is a list where the order of items matters. The browser numbers each item automatically: 1, 2, 3... A race ranking or the steps of a recipe are good examples.

An ordered list opens with the <ol> (ordered list) tag. Items are again written inside <li>. The only difference from an unordered list is the container's name: you use <ol> instead of <ul>.

The type attribute

You can change the numbering style by giving the <ol> tag a type attribute. Its allowed values are:

1 — numbers (default): 1, 2, 3
A — uppercase letters: A, B, C
a — lowercase letters: a, b, c
I — uppercase Roman: I, II, III
i — lowercase Roman: i, ii, iii

Example: <ol type="A"> numbers items as A, B, C.

The start attribute

Sometimes you want to start the list at a number other than 1. You give the <ol> tag a start attribute. For example <ol start="3"> starts the list at 3: 3, 4, 5...

This is useful in a long list that continues after a break. start is always an integer; it can be combined with type: <ol type="A" start="3"> starts the list at C.

Exercise Write a travel plan list

Add an <ol> list to body. It should have at least three <li> items; for example a travel plan with Istanbul, Izmir and Antalya.

Show example solution

<body>
  <ol>
    <li>Istanbul</li>
    <li>Izmir</li>
    <li>Antalya</li>
  </ol>
</body>

Test yourself

Which type value gives uppercase Roman numerals (I, II, III)?
```
<ol type=""></ol>
```
- 1
- A
- a
- I
Show answer

I — Correct. type="I" gives uppercase Roman numerals: I, II, III.

Start the list at three

<ol ____>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

Show answer

<ol start="3">
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

Match each type value to its output

type="1"

1, 2, 3
type="A"

A, B, C
type="a"

a, b, c
type="I"

I, II, III

Next lesson: Description lists

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies