Written by Harry Roberts on CSS Wizardry.
This is a really small blog post about ordered lists and numbered lists and their subtle differences.
Have you ever wanted to say something like ‘There are three things to look out for:’ and then follow with a numbered list with the three things in?
I’m pretty sure we all have, and that we’d all normally use an
<ol> to get the numbers, right? That’s how you get numbers next to list items after all…
Well the problem here is that the numbering defines an amount, not an order. The order is usually irrelevant in this scenario.
To make more sense I’ve drawn up a small fiddle of examples and the reasoning in each.
Here we can see that, although we want numbers, we don’t always want order.
The trick I’ve started employing is is to have a
.numbered class which I can apply to a
<ul> to make it mimic the appearance of an ordered list, without semantically carrying the ordered weight. This is how I do it:
There. As simple as that. These are pretty much my default list styles now, and all I’m really doing is making an unordered list with a class of numbered look the same as an
Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.
You can now find me on Mastodon.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.