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
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.
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.