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:
ul,
ol{
margin-bottom:1.5em;
}
li ul,
li ol{
margin-bottom:0;
}
ul{
list-style:square outside;
}
ol,
.numbered{
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>.
By Harry Roberts on Saturday, September 17th, 2011 in Web Development. Tags: CSS, HTML, Semantics | 9 Comments »
+
Todd Wolfson said on 17 September, 2011 at 5:16 pm
Fun fact: This can also be chained with the counter-reset and counter-increment CSS properties to make the lists go beyond the norm even for <ol>’s.
Ashley Nolan said on 17 September, 2011 at 7:57 pm
Literally never considered the difference between the rank order and just the use of list numbers – although after reading this it smacks of obvious! Will definitely be using a similar styling approach in future work.
Ade said on 17 September, 2011 at 11:19 pm
Which type of list I choose is largely dependent upon how the content is most appropriately announced by aural ATs: most will read either “1, list item; 2, list item…” or “bullet, list item; bullet, list item…”. AT behaviour is also why I never remove list styles from lists in body text.
Harry Roberts said on 18 September, 2011 at 2:38 am
@Todd: Indeed. http://csswizardry.com/2010/11/mark-up-a-semantic-accessible-progressively-enhanced-mobile-optimised-progress-bar-bonus-style-the-numbers-in-an-ordered-list/ :)
Houston Web Designer said on 18 September, 2011 at 4:27 am
I have always used UL for most everything I do. Thanks for the explanation of UL vs OL.
Jonathon said on 18 September, 2011 at 8:59 am
I do appreciate the point, but I feel that it is taking the notion of semantics a step further than we need grey our hairs over.
If the numbers are desired as a figuring device for the visual user, why deny them for the visually impaired. It seems the inverse of what the initiative is aiming for. The visual user is unaware fo the semantic benefits you have tried to impart as they have the ordering device on screen that you have denied the screen reader user.
If you translate this element use-case to a vocal presentation or even normal conversation, the instance of describing an amount and then recounting those facts that contribute to the aggregate amount you will pick an order. You may well use your fingers to emphasise the countdown, not the order. In this case, and ignoring the metaphysics of identity and difference, the ordering is inevitable.
not to mention that it takes more bytes…
Scott said on 18 September, 2011 at 2:30 pm
I always wondered why everyone uses a ‘ul’ for site menus. Surely every menu has some kind of order to it? I know that I always write menus in whatever order makes most sense, whether it be importance or simply alphabetical.
jivanshr said on 18 September, 2011 at 4:57 pm
For this moment on, I should think of using ol instead of using ul all times. After all, it’s about meaningful markup!
Stephen Greig said on 19 September, 2011 at 6:04 pm
Have to agree with @Jonathon.
@Harry, your logic and way of thinking is exceptional.
But in this case it just feels unnecessary and the outcome is defeated if the stylesheet is removed.