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.

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.