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:
- HTML
- CSS
- 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:
- javascript
- php
And after some other content to continue that list.
- ruby on rails
- 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:
- Octavianus Augustus
- Commodus
- 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.