Lists (ol/ul)
This course covers the HTML list elements and when to use each one. It starts with a test for choosing between ul and ol: whether shuffling the items would change the meaning. It shows how lists give screen readers the list role and an item count. It explains a Safari behavior where list-style: none removes list semantics, and the role="list" fix. It also covers nested lists, the start, reversed and type attributes of ol, description lists with dl, and a full page example.
What you'll learn
- ✓Choosing between ul and ol with the shuffle test
- ✓How lists expose the list role and item count to screen readers
- ✓Using role="list" when list-style: none removes bullets in Safari
- ✓Nesting a sub-list inside its parent li
- ✓Numbering ordered lists with start, reversed and type
- ✓Building term and description pairs with dl, dt and dd
ul vs ol: order that matters, or doesn't
Apply one test every time, as the Semantic HTML courses did for article/section/aside: if you shuffled the items, would the meaning change? A cart's contents mean the same in any order, so they get <ul> (unordered list). Checkout steps happen in sequence, and shuffling them makes the instructions…
Read the full lesson free →Curriculum
7 lessonsul vs ol: order that matters, or doesn't
Uses a shuffle test to choose between ul and ol, with li as the only valid direct child.
Lists are not just visual: the list role and item count
Shows how ul and ol give screen readers the list role and an item count that typed bullets lack.
The CSS trap: list-style: none can silently break screen readers
Explains how list-style: none makes Safari drop list semantics outside nav, and how role="list" restores them.
Nested lists: the one structural rule that matters
Teaches that a nested list must sit inside its parent li, never beside it as a sibling.
ol's extra attributes: start, reversed, and type
Covers the start, reversed and type attributes that control how an ordered list is numbered.
dl: lists of pairs, not just Bullet points
Introduces dl for term and description pairs, used for specifications, glossaries, FAQs and metadata.
Putting it all together: a real navigation menu and FAQ
Builds a navigation menu, a numbered steps section and an FAQ, each with the fitting list type.