šŸŽ Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

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

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.

  1. ruby on rails
  2. 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:

  1. Octavianus Augustus
  2. Commodus
  3. Nero

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

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *