Example
An ordered list can be created with the <ol> tag and each list item can be created with the <li> tag as in the example below:
<ol>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>
This will produce a numbered list (which is the default style):
- Item
- Another Item
- Yet Another Item
Manually changing the numbers
There are a couple of ways you can play with which numbers appear on the list items in an ordered list. The first way is to set a starting number, using the start attribute. The list will start at this defined number, and continue incrementing by one as usual.
<ol start="3">
<li>Item</li>
<li>Some Other Item</li>
<li>Yet Another Item</li>
</ol>
This will produce a numbered list (which is the default style):
- Item
- Some Other Item
- Yet Another Item
You can also explicitly set a certain list item to a specific number. Further list items after one with a specified value will continue incrementing by one from that list item's value, ignoring where the parent list was at.
<li value="7"></li>
It is also worth noting that, by using the value attribute directly on a list item, you can override an ordered list's existing numbering system by restarting the numbering at a lower value. So if the parent list was already up to value 7, and encountered a list item at value 4, then that list item would still display as 4 and continue counting from that point again.
<ol start="5">
<li>Item</li>
<li>Some Other Item</li>
<li value="4">A Reset Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>
So the example above will produce a list that follows the numbering pattern of 5, 6, 4, 5, 6 - starting again at a number lower than the previous and duplicating the number 6 in the list.
Note: The start and value attributes only accept a number - even if the ordered list is set to display as Roman numerals or letters.
5
You can reverse the numbering by adding reversed in your ol element:
<ol reversed>
<li>Item</li>
<li>Some Other Item</li>
<li value="4">A Reset Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>
Reverse numbering is helpful if you're continually adding to a list, such as with new podcast episodes or presentations, and you want the most recent items to appear first.
Changing the type of numeral
You can easily change the type of numeral shown in the list item marker by using the type attribute
<ol type="1|a|A|i|I">
| Type | Description | Examples |
|---|---|---|
1 | Default value - Decimal numbers | 1,2,3,4 |
a | Alphabetically ordered (lowercase) | a,b,c,d |
A | Alphabetically ordered (uppercase) | A,B,C,D |
i | Roman Numerals (lowercase) | i,ii,iii,iv |
I | Roman Numerals (uppercase) | I,II,III,IV |
You should use
olto display a list of items, where the items have been intentionally ordered and order should be emphasized. If changing the order of the items does NOT make the list incorrect, you should use<ul>.
