Ordered and Unordered Lists
Menus, recipes, instructions, feature lists, search results: much of the web is lists. HTML has two everyday list types, and the choice between them comes down to one question about your content, not about bullets or numbers.
The rule
If shuffling changes the meaning, use ol; if not, use ul.
<ul> is an unordered list: the items belong together, but their order does not matter.
<h3>Pack for the trek</h3>
<ul>
<li>Water bottle</li>
<li>Rain jacket</li>
<li>Torch</li>
</ul><ol> is an ordered list: the sequence is part of the meaning, like steps or rankings.
<h3>Make filter coffee</h3>
<ol>
<li>Add coffee powder to the upper chamber.</li>
<li>Pour boiling water over it and cover.</li>
<li>Wait fifteen minutes, then mix the decoction with hot milk.</li>
</ol>In both, every item is an li (list item), and li elements are the only children a ul or ol may have directly. Text or other elements go inside an li, never loose between them.
Useful ol attributes:
start="4"begins counting at 4, handy when a list continues after a paragraph.reversedcounts down, like a top-ten list ending at number one.type="a","A","i"or"I"choose letters or Roman numerals when the numbering style is part of the meaning (as in legal clauses).
Bullets and numbers are only default styling. CSS can remove the bullets from a ul, which is exactly how most navigation menus are built: a list of links, styled not to look like a list. Screen readers still announce "list, 5 items", which helps people know what they are in.
The shortcut
Imagine shuffling the items. Did anything break?
Directions to the station
Shuffle "turn left" and "go straight" and people get lost. Meaning broke:
ol.
The trap is choosing by looks, for example ol because you want numbers for decoration, or typing "1.", "2." by hand inside a ul.
Drills
Answer fast — trust the rule.
Which list type fits the steps for changing a tyre?
Which element must directly wrap each item in a ul?
A list continues after a paragraph and should start at 6. What do you write?
A navigation menu shows links side by side with no bullets. What is the usual markup?
Remember
olwhen order is meaning,ulwhen it is not; every item is anli.- Shortcut: imagine shuffling. If meaning breaks, it is ordered.
- Trap: choosing by bullets or numbers, or putting anything but
lidirectly inside a list.