5. Lists

This is topic 5 of HTML Essentials. Lists are how you group related items so the browser can bullet or number them - and nesting lets you build outlines and sub-steps.

Ordered, unordered, and nested

Lists group related items so the browser can number or bullet them for you. Each item sits inside an <li> (list item) element.

<ul> is an unordered list - items get bullets.
<ol> is an ordered list - items get numbers (1, 2, 3…).
<li> holds a single item; every <li> must live inside a <ul> or an <ol>.
To nest a list, place a new <ul> or <ol> inside an <li>, before that item's closing tag.

Try it: three lists in one file

Copy this into a file called index.html and open it in a browser to see bullets, numbers, and a nested list:

You should see bullets under "Things to buy", numbers under "How to make tea", and - under "Fruit" - a second, indented list of bullets.

Key points

<ul> = bullets; <ol> = numbers; both contain <li> items.
Every <li> must be directly inside a <ul> or an <ol>.
Nest by putting a whole list inside an <li>.
Nested ordered lists restart their numbering from 1.

Exercises

Exercise 1 - Build a nested list

Preparation: re-read "Ordered, unordered, and nested" above.

Write an unordered list of three days of the week. Inside one of the items, nest a second list of two activities you do on that day.

Try it in: save as index.html and open in a browser, or use CodePen / VS Code. Starter: <ul><li>…</li></ul>

Hint 1 - direction

Start with an outer <ul>, and put each day in its own <li>.

Hint 2 - partial solution

To nest, open a new <ul> inside the chosen <li>, before that <li>'s closing tag.

Hint 3 - full solution

Check your work: the browser shows three bulleted days, and your chosen day has two extra indented bullets beneath it.

Exercise 2 - Convert an unordered list to an ordered one (and back)

Preparation: note the difference between <ul> and <ol>.

Take a <ul> with three items, change it to an <ol>, reload the page, then change it back. What changes in the browser each time?

Try it in: your editor - reload the page after each change.

Hint 1 - direction

Only the opening and closing tags need to change.

Hint 2 - partial solution

<ul> gives bullets; <ol> gives numbers 1, 2, 3.

Hint 3 - full solution

Change <ul>…</ul> to <ol>…</ol>. The items keep the same text and <li> tags - only the marker changes from bullets to numbers, and back again when you restore <ul>.

Check your work: you saw bullets become 1, 2, 3, then return to bullets - without editing any <li>.

Exercise 3 - Predict the numbering

Preparation: re-read how <ol> numbers items, and how nesting works.

Without running it, predict the numbers shown by this list: an <ol> with items "One", "Two", "Three", where "Two" contains a nested <ol> of two items. Write down the numbers you expect, then check in the browser.

No code needed - write your prediction, then type it and check.

Hint 1 - direction

The outer list numbers its three items 1, 2, 3.

Hint 2 - partial solution

The nested list starts counting again from 1.

Hint 3 - full solution

The numbers read 1, 2, 1, 2, 3 - the nested ordered list restarts at 1, so it does not continue 3, 4.

Check your work: you predicted a fresh 1, 2 for the inner list, not a continuation.

Exercise 4 - Fix a list with an item left outside

Preparation: note that every <li> must sit inside a <ul> or an <ol>.

The markup below has one <li> left outside its list. Find the mistake, fix it, and explain in one sentence what was wrong.

Try it in: your editor - move the stray <li> inside the <ul>, then reload.

Hint 1 - direction

Check each <li>'s parent element.

Hint 2 - partial solution

The third item sits after the </ul> closing tag, so it is outside the list.

Hint 3 - full solution

Move <li>Third item</li> so it sits before the </ul>. Every <li> must be a direct child of a <ul> or <ol> - outside, it is not a list item at all.

Check your work: the browser now shows three bullets, and your fixed markup has all three <li> elements inside the <ul>.