Lists

ul is a bulleted list and ol a numbered one. Either holds li items, and a list nests by putting a whole list inside an item.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Navigation menus, steps, ingredients, search results: most of the web is lists. Marking them as lists gives them structure a reader can count and skip.

How to think about it

Order matters, ol; otherwise ul. Only li goes directly inside; anything else, including a nested list, goes inside an li.

Worked example

<ul><li>Milk</li><li>Eggs</li></ul>

Bullets: the order does not matter.

<ol><li>Preheat</li><li>Mix</li><li>Bake</li></ol>

Numbers: the order matters. The browser counts for you.

<ul><li>Fruit<ul><li>Apples</li></ul></li></ul>

A nested list lives inside the item it belongs to, not beside it.

Your turn

Start a numbered list.

<><li>First</li></>

The trap

Putting a nested ul directly inside the outer ul rather than inside an li. It usually renders, and it is invalid, and screen readers lose the count.

Practise lists on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.