Lists
Group items into bulleted and numbered lists, keep every item inside its list, and put a list inside an item.
Menus, playlists, search results and recipes are all lists of items.
A lot of text is a list: things to bring, events in order, steps to follow. Lists use tags inside tags, just like <strong> inside <p>.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<h2>What to bring</h2>
<ul>
<li>Hat</li>
<li>Water</li>
<li>Sunscreen</li>
</ul>
<ul> makes a list and <li> is one item in it. Read the code. What does the page show under the heading?
Run
Compare the page with your prediction. Then change <ul> and </ul> to <ol> and </ol>: the bullets become numbers. Add one more <li> to the numbered list and watch the numbers update by themselves.
| Code | What it does | Why |
|---|---|---|
<ul> … </ul> |
Makes a list with bullets | ul is an unordered list: the order of the items does not matter |
<ol> … </ol> |
Makes a numbered list | ol is an ordered list. The browser does the counting, so add or move an item and the numbers follow |
<li>Hat</li> |
One item in a list | Every <li> belongs inside a <ul> or an <ol>. Outside one it has no list to belong to and sits in the wrong place |
<li>Relay <ul> … </ul></li> |
A list inside an item | An item is a box like any other, so a whole list can go inside it. The small list closes before </li>, as with any nesting |
the spaces before <li> |
Make the code easier to read | The browser ignores them. The indent is for you, to see which box each line is in |
<h1>Sports day</h1>
<h2>What to bring</h2>
<ul>
<li>Hat</li>
<li>Water</li>
</ul>
<h2>Events</h2>
<ol>
<li>Sprint</li>
<li>Relay</li>
<li>Long jump</li>
</ol>
Investigate
Put the scrambled lines in order.
This list has a problem.
An item is a box, so another list can sit inside it.
Put the lines in order to make a numbered list of three events. One line is not needed.
Long jump should be number 3 in the list, but it shows a dot and sits further left. Click the line that causes it.
Modify
Add Long jump as the third event.
Need a hint?
Copy a whole <li> line, then change its words.
Show the expected result
Under a new heading, What to bring, add a bulleted list: hat and water.
Need a hint?
A bulleted list starts with <ul> and ends with </ul>.
Another hint
Put an <h2> heading above the list, then one <li> for each thing to bring.
Show the expected result
Inside the Relay item, add a bulleted list of two houses: Owls and Hawks.
Need a hint?
Put the small list inside the Relay item, before its </li>.
Another hint
Open <ul>, add one <li> for each house, then close </ul>.
Show the expected result
Add a bulleted list of things to bring.
This ticks when your page has all of the above.
Put a list of houses inside the Relay item.
This ticks when your page has all of the above.
Mix it up
Work out the answer before you open the playground.
<style>
li {
color: navy;
font-size: 20px;
}
</style>
<h2>Events</h2>
<ol>
<li>Sprint</li>
<li>Relay
<ul>
<li>Owls</li>
<li>Hawks</li>
</ul>
</li>
<li>Long jump</li>
</ol>
<p>The winner gets a medal.</p>
How many lines of text turn navy and 20px?
Make
Make a page with your top 5 (books, games, places, songs): a title, a numbered list of five items, and a smaller bulleted list inside one item, for example the reasons you picked it.
Need a hint?
Start with an <h1> title, then <ol> and five <li> lines.
Another hint
Pick one item and put a smaller <ul> inside it, before its </li>: the book it was written after, or the best game on the level.
Another hint
Turn on Boxes: the small list should sit inside one item's box.
Show the expected result
Write a top 5 list with a title and a smaller list inside one item.
This ticks when your page has all of the above.
For teachers
Students make bulleted and numbered lists, keep every item inside its list, and put a list inside an item. About 45 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can make a bulleted list with <ul> and a numbered list with <ol>, with each item in <li>.
- I can keep every <li> inside its list.
- I can put a list inside an <li>.
Before class
Read the unit primer "Lists, links and pictures in 5 minutes" first, then do the Make task yourself.
The idea: a list is a box of items. <ul> gives bullets, <ol> gives numbers, and every <li> must sit inside one. An item is a box too, so another list can go inside it, which is nesting from the second lesson.
Turn on Boxes in the playground: it shows each item inside its list.
Running the lesson
- Predict: some students expect the items to join into one line, as paragraphs did in the first lesson. The `<ul>` and `<li>` tags make the bullets, not the line breaks. Ask the pair that voted for one line which lesson taught them that.
- Run: change `<ul>` to `<ol>` together, then add an item. The browser numbers the list itself, so students never type the numbers.
- Investigate: the parsons task has a spare line with `1.` typed by hand; the browser does the counting. The lost item is one `<li>` after `</ol>`: ask which tag closed the list.
- Mix it up: one rule picks every `li`, including the ones inside the inner list. Ask a student to point at each of the five.
- Make: in Boxes, the inner list's box sits inside one item's box.
The hard part (on purpose)
Keeping every li inside its list. Turn on Boxes and ask which box each item sits in, rather than moving the tag for them.
When students get stuck
- An item has a dot, or a different number from the others, and sits further left. Ask: Is this <li> between the list's opening and closing tags? Fix: Move the closing </ul> or </ol> below the last item.
- Numbers typed in the items show twice, as in 1. 1. Sprint. Ask: Who does the counting in an ordered list? Fix: Remove the typed numbers. Write only the words in each <li>, and the <ol> adds the numbers.
- The small list shows after the item, not under it. Ask: Does the small list start before the </li> of its item? Fix: Move the </li> below the small list's </ul>.
Stretch and support
Stretch: Put a list inside a list inside a list. What does the browser do to the bullets at each level? Then write an li rule that makes every item a different colour from its heading.
Support: Give students the Modify starter and do the first task together. Point at Boxes to show the new item's box inside the list.
Where it leads
Next lesson makes the items in a list into links, with a new idea: an attribute inside the opening tag. Class idea: write the steps to make toast as an ordered list, then swap and follow a partner's list.
What each step is for
- Predict: Students expect a list to show as one line, or with numbers; the tag decides, and <ul> gives bullets.
- Run: The list tag makes the bullets or numbers, every item sits inside it, and an item can hold a whole list.
- Investigate: The browser numbers an ordered list by itself, every item belongs inside a list, and a list can sit inside an item.
- Modify: Adding to a list, then adding a second list, one change at a time, checking the page after each.
- Mix it up: A rule picks every tag of its kind, including the ones inside other tags.
- Make a bulleted list with <ul> and a numbered list with <ol>, with each item in <li>.
- Keep every <li> inside its list.
- Put a list inside an <li>.