Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Attention! I discovered a new HTML attribute! Let me introduce you to value. ๐Ÿ‘‡

Quick HTML tip: I just discovered that `li` elements support a `value` attribute to configure the start of an ordered list. Example showing an ordered list including a list item that defines a `value` property.

This Tweet was trending quite a bit. When many people see something, there are good comments.

It turned out that there are multiple ways to control the numbers of an ordered list.

Let's have a quick look!

Specify a list's start using start

First, you can specify the list index with the start attribute. Ordered lists usually start at 1.


start is valuable if your lists are divided by paragraphs and additional information.

Define the list item position using value

You can also control the position of a single list item with the value attribute.


value is valuable if you're dealing with rankings and two entries are in the same position.

Bonus: Control list styles via CSS

And for completeness: you can also control list styles via the list-style property and a custom @counter-style.


Read more about list-style on MDN.

If you're going for custom list styles, don't visually change the meaning of your listing to keep your HTML accessible in RSS feeds or assistive technology.

It's fascinating that HTML still holds surprises for me after writing it for over ten years!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles