Tricks with the basic HTML list: using start, reversed and value

DanielApril 2, 2020

Just discovered 3 new things with the plain old HTML ordered list.

1. We can reverse an ordered list

If we add the reverse attribute to an ol, then the elements in that list will be listed end to start.

<ol reversed>
    <!-- content here -->
</ol>

Example:

1. HTML
2. CSS
3. JS

2. The ol supports a start attribute

If we want to start the numbering of the elements from another value that the default 1 we can use the start attribute.

<ol start="3">
    <!-- content here -->
</ol>

It's great if we have an initial list like this one:

1. javascript
2. php

And after some other content to continue that list.

3. ruby on rails
4. java

3. We can set a value attribute for the li elements

To have full control of what value will be assigned to the li elements in the CSS counters we can use this value attribute. For example:

<ol>
    <li value="63">Octavianus Augustus</li>
    <li value="180">Commodus</li>
    <li value="54">Nero</li>
</ol>

Will output the following list:

63. Octavianus Augustus
180. Commodus
54. Nero

After many years doing web stuff daily I am still amazed about how much detail goes even in the simple elements. Onwards!