Recently I posted a list of programming platitudes. It contains all my wisdom from the past 20 years squeezed into 20 tongue in cheek phrases. For humour value I wanted to mess with the numbering in the list and this led me to discover some attributes of HTML ordered lists that I thought I would share.
As many of you may know, articles on dev.to are written in Markdown and I wanted my list to start at zero, so I wrote the following:
0. zero
1. one
2. two
While the Markdown parser recognised this as an ordered list, unfortunately it ignored the values before the full stop (period) and started the list at one which resulted in something like this:
- zero
- one
- two
I did a quick check and found that the <ol> tag (ordered list) supports a start attribute. There is no way in Markdown syntax to set this attribute however you can embed HTML in Markdown. Therefore I updated my article use HTML:
<ol start=0>
<li>zero</li>
<li>one</li>
<li>two</li>
</ol>
This worked just as required.
- zero
- one
- two
Further on in the article I wanted have one item listed out of order, another quick check and I found the <li> tag supports a value attribute when in an ordered list. This specifies what number to use for that item. Items after this will carry on incrementing from that value.
<ol start=0>
<li>zero</li>
<li>one</li>
<li>two</li>
<li value=5>skip to five</li>
<li>carry on with six</li>
</ol>
- zero
- one
- two
- skip to five
- carry on with six
You can use the value attribute in a later item to jump back or skip to what ever number you like. With these two attributes you really can make a mess of your ordered list.
In addition the <ol> tag support a Boolean attribute reversed which predictably reverses the list and numbers the items from high to low. It also supports a type attribute to switch from numbers to letters or roman numerals. See the full spec here
Nothing earth shattering, but sometimes it's nice to discover some core functionality of basic HTML you never knew (or forgot) about.
Top comments (0)