Lists

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

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>.

Timing

Predict and Run 10 min · Investigate 10 min · Modify 10 min · Mix it up 5 min · Make 10 min

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

1. 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.
2. Run: change <ul> to <ol> together, then add an item. The browser numbers the list itself, so students never type the numbers.
3. 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.
4. 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.
5. Make: in Boxes, the inner list's box sits inside one item's box.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

• Toast, in order (end, 5 min)

  Write the steps for making toast as an ordered list. Swap with a partner and add a missing step in the right place.

  Point out that the numbers move by themselves when a step is added. Ask what would happen if the numbers were typed by hand.

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

Answers to the checks

1. Predict: What does the page show under the heading?
   Three items, each on its own line with a bullet. The <ul> makes the list, and each <li> is one item. The browser adds the bullets.
2. Build a list: Put the lines in order to make a numbered list of three events. One line is not needed.
   see the program below
   <ol> numbers its items itself, so the items are only their words. Typing 1. in the item would give the line two numbers. The <ol> opens the list, each <li> sits inside it, and </ol> closes it.

   <ol>
     <li>Sprint</li>
     <li>Relay</li>
     <li>Long jump</li>
   </ol>
   

3. The lost item: Long jump should be number 3 in the list, but it shows a dot and sits further left. Click the line that causes it.
   line 6
   Line 6 is outside the list: </ol> on line 5 already closed it. Move </ol> below Long jump, so every <li> is inside the <ol>.
4. A list inside an item: In this list, where does the small list of houses sit?
   Inside the Relay item
   The <ul> is inside the Relay <li>, so it belongs to Relay and is indented under it. An item can hold any tag you have met, including a whole list.
5. Mix it up: How many lines of text turn navy and 20px?
   5
   The rule picks every li: Sprint, Relay, Owls, Hawks and Long jump. It does not matter that two of them sit inside another list. The heading and the paragraph are different tags.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Add an event

<h1>Sports day</h1>
<h2>Events</h2>
<ol>
  <li>Sprint</li>
  <li>Relay</li>
  <li>Long jump</li>
</ol>
<p>Races start at 9 am.</p>

Modify › Add a list of things to bring

<h1>Sports day</h1>
<h2>Events</h2>
<ol>
  <li>Sprint</li>
  <li>Relay</li>
  <li>Long jump</li>
</ol>
<h2>What to bring</h2>
<ul>
  <li>Hat</li>
  <li>Water</li>
</ul>
<p>Races start at 9 am.</p>

Modify › A list inside Relay

<h1>Sports day</h1>
<h2>Events</h2>
<ol>
  <li>Sprint</li>
  <li>Relay
    <ul>
      <li>Owls</li>
      <li>Hawks</li>
    </ul>
  </li>
  <li>Long jump</li>
</ol>
<h2>What to bring</h2>
<ul>
  <li>Hat</li>
  <li>Water</li>
</ul>
<p>Races start at 9 am.</p>

Make

<h1>My top 5 books</h1>
<ol>
  <li>The Hobbit
    <ul>
      <li>A dragon</li>
      <li>A map</li>
    </ul>
  </li>
  <li>Wonder</li>
  <li>Holes</li>
  <li>Matilda</li>
  <li>Hatchet</li>
</ol>

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.

Exit ticket

A student types 1. 2. 3. at the start of each item in an <ol>. What does the page show, and what should they do?

Each item shows two numbers, the one the browser added and the one typed. They should delete the typed numbers: the <ol> counts for them.

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.

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.