Not well known attributes for ordered list in HTML

In html exist the ol tag that allow you to show an ordered list.

1
2
3
4
5
6
7
<ol>
    <li>Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

and for the above code the result is the following:

Ordered list showing name of fruits from 1 to 5

But what about if you want to change the order number? You can use the value attribute for the li tag.

1
2
3
4
5
6
7
<ol>
    <li value="5">Banana</li>
    <li value="4">Strawberry</li>
    <li value="3">Peach</li>
    <li value="2">Orange</li>
    <li value="1">Lemon</li>
</ol

and the result will be:

Ordered list showing name of fruits from 5 to 1

Great, but there is another attribute that may be useful and give you the same result with less code. I am talking about the reversed attribute

1
2
3
4
5
6
7
<ol reversed>
    <li>Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

much better because of the “less code” part!

Ordered list showing name of fruits from 5 to 1 using the reverse attribute

Ok but now you have a section where you need to show the Top Ten Fruits. I know! You are thinking in an easy solution, just mix the reversed attribute with the value attribute, right?

1
2
3
4
5
6
7
<ol reversed>
    <li value="10">Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

Ordered list showing name of fruits from 10 to 5 using the reverse and value attribute

Sure, that get the job done, but in this case there is other way using the start attribute. 

1
2
3
4
5
6
7
<ol reversed start="10">
    <li>Banana</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Orange</li>
    <li>Lemon</li>
</ol

Good now you can have the same behavior but using only attributes for the ol tag.

Ordered list showing name of fruits from 10 to 5 using the reverse and start atrribute

Browser Support

All these examples will work fine in basically every browser, but worth mentioning a couple of things:

  • start attribute for the ol tag was deprecated in html 4, but still supported in html 5.
  • value attribute for the li tag was deprecated in html 4, but still supported in html 5.

Hope it helps!