<ul> or <ol>? Do you know when to choose which?

When to mark up information as a list? It seems such an easy task. But if you’ve been at it for a while your brain starts seeing lists everywhere. The next couple of tricks help you decide if information should be marked up as a list, and if so, if that list is unordered or ordered.

Are you looking at a list?

Information should be marked up as a list if it consists of a set of similar items. For instance, search results, or navigation items. Sometimes when converting a visual design to HTML you might notice every single element collection starting to feel like a list. When it feels like you're in that kind of situation, ask yourself:

"Should screenreader software announce the number of items?"

If it should, the information you’re looking at is definitely a list.

Another way would be to ask yourself if it would be weird if the items in the list would be marked with bullets or numbers (trick by @stommepoes). If it’s not weird, we got a list on our hands.

Should the list be ordered?

Now that we've found a list we need to decide if it's an ordered <ol> or if it's an unordered <ul> list.

The w3 spec states the following about about ordered lists:

A list in which the items are intentionally ordered, such that changing the order would change the meaning of the list.

If changing the order of the list causes the list to lose any meaningful data then it should be marked up as an ordered list.

For instance the following lists should be formatted as an <ol>

• Search results (assuming they’re returned by relevance). Shuffle the list items and suddenly you can no longer determine the relevance of each item.
• Article comments. Shuffling the comments causes comments referencing earlier comments to lose meaning.
• IKEA furniture instructions.

If a list does not lose information when shuffling the items it’s safe to go with the <ul> instead of the <ol> element.

That's it, you now possess the super power to determine if if some bit of information should be marked up as a list or not. Let me know if you have any questions, happy to answer them below.