Sentinel: Your Web-Performance Watchman

Ordered and numbered lists; the differences

Written by on CSS Wizardry.

Table of Contents

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:

li ul,
li ol{
    list-style:square outside;
    list-style:decimal outside;

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 <ol>.

Did this help? We can do way more!

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.

Suffering? Fix It Fast!


  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024


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.