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, 3A— uppercase letters: A, B, Ca— lowercase letters: a, b, cI— uppercase Roman: I, II, IIIi— 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