A place on the page

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 give a heading a name with id.
• I can link to it with href starting with
• I can explain why each id is used once and why the

Timing

Predict and Run 10 min · Investigate 8 min · Modify 8 min · Mix it up 4 min · Make 12 min

Before class

Do the Make task yourself (about 5 minutes).

An id is an attribute that gives one element a name. A link whose href starts with # goes to the element with that name on the same page. The # is the whole difference between "this page" and "another page". Pages need to be long enough to scroll, or the jump is invisible: make the preview small or add a paragraph.

Running the lesson

1. Predict: most students pick the first option, but some think the link opens a new page, because every link they have written so far did. Run it and click each link.
2. Run: ask which name appears in both a link and a heading. Then try changing id="results" to id="result": the link stops working and nothing says why. Matching names are all the browser has.
3. Modify: name a place, link to it, then link back to the top. After each step, click the new link to test it.
4. Investigate: the shared id has no visible symptom except the second part never being reached. Ask them to find it by clicking.
5. Make: the check needs the six exact fragments. If it does not tick, compare each href with its id letter by letter.

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.

• Where will it go? (predict, 3 min)

  Look at the code. Point to where you think the page will scroll when someone clicks Results, and tell your partner how you know.

  Listen for students who point at the link itself. Ask them what in the heading tells the browser this is the place.

• Contents list (end, 5 min)

  Swap pages with a partner. Click every link in their menu. Tell them which link does nothing, and read the name in the link and in the heading aloud.

  Most failures are a missing #, a different spelling, or a capital letter. Let the partner find the mismatch.

The hard part (on purpose)

Matching the name in the href and the id exactly, and remembering the # in the href only. Have them click every link to test it.

When students get stuck

Answers to the checks

1. Predict: Someone clicks Results in the menu. What does the page do?
   It scrolls to the Results heading. The link's href names a place on this page, and the heading with that id is the place.
2. Where does Join go?: Two sections both have id="join", and the menu has a link to #join. Where does the link go?
   To the first one
   An id names one element. The browser takes the first match, so the second Join part cannot be reached by a link. Give each part its own name.
3. The link that leaves: Rules and Join jump down the page, but clicking Results tries to open a different page. Click the line that causes it.
   line 4
   Line 4 has href="results" with no #. Without the #, the browser looks for a page called results instead of an element with that id. It should be href="#results".
4. Mix it up: Put the lines in order to make a header with the title and, inside a nav, a list of two links. One line is not needed.
   see the program below
   The header holds the title and the nav. The nav holds the list, and each link sits in its own item. </main> would close a part this page has not opened.

   <header>
     <h1>Chess club</h1>
     <nav>
       <ul>
         <li><a href="https://example.com/rules">Rules</a></li>
         <li><a href="https://example.com/join">Join</a></li>
       </ul>
     </nav>
   </header>
   

Solutions

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

Modify › Name a place

<header>
  <h1>Chess club</h1>
  <nav>
    <ul>
      <li><a href="#results">Results</a></li>
      <li><a href="#join">Join</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2 id="meet">When we meet</h2>
    <p>Wednesdays at lunch in room 4. Bring a board if you have one.</p>
  </section>
  <section>
    <h2 id="results">Results</h2>
    <p>The Owls won the autumn ladder. The Hawks came second.</p>
  </section>
  <section>
    <h2 id="join">Join</h2>
    <p>Come to room 4 on Wednesday and ask for a game.</p>
  </section>
</main>

Modify › Link to it

<header>
  <h1>Chess club</h1>
  <nav>
    <ul>
      <li><a href="#meet">When we meet</a></li>
      <li><a href="#results">Results</a></li>
      <li><a href="#join">Join</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2 id="meet">When we meet</h2>
    <p>Wednesdays at lunch in room 4. Bring a board if you have one.</p>
  </section>
  <section>
    <h2 id="results">Results</h2>
    <p>The Owls won the autumn ladder. The Hawks came second.</p>
  </section>
  <section>
    <h2 id="join">Join</h2>
    <p>Come to room 4 on Wednesday and ask for a game.</p>
  </section>
</main>

Modify › Back to the top

<header>
  <h1 id="top">Chess club</h1>
  <nav>
    <ul>
      <li><a href="#meet">When we meet</a></li>
      <li><a href="#results">Results</a></li>
      <li><a href="#join">Join</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2 id="meet">When we meet</h2>
    <p>Wednesdays at lunch in room 4. Bring a board if you have one.</p>
  </section>
  <section>
    <h2 id="results">Results</h2>
    <p>The Owls won the autumn ladder. The Hawks came second.</p>
  </section>
  <section>
    <h2 id="join">Join</h2>
    <p>Come to room 4 on Wednesday and ask for a game.</p>
  </section>
</main>
<p><a href="#top">Back to the top</a></p>

Make

<header>
  <h1>Chess club</h1>
  <nav>
    <ul>
      <li><a href="#rules">Rules</a></li>
      <li><a href="#results">Results</a></li>
      <li><a href="#join">Join</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2 id="rules">Rules</h2>
    <p>Think before you move. Shake hands at the end.</p>
  </section>
  <section>
    <h2 id="results">Results</h2>
    <p>The Owls won the autumn ladder.</p>
  </section>
  <section>
    <h2 id="join">Join</h2>
    <p>Come to room 4 on Wednesday.</p>
  </section>
</main>

Stretch and support

Stretch: Add a fourth part with its own id and menu link, and a link at the bottom of the page that jumps back to the top (give the heading an id).

Support: Give students the Make starter with the ids already added, and ask them only to build the nav and the links.

Exit ticket

A menu link has href="results" and a heading has id="results". The link does not jump. What is missing, and why?

The #. href="#results" means the element named results on this page; without it the browser looks for another page called results.

What each step is for

• Predict: Students read href as an address to another page; committing first shows what the # and the matching id do.
• Run: A matching name in the id and in the href is all that joins the link to its place.
• Investigate: Each id names one element, and a jump link needs both the # and the exact name.
• Modify: A jump needs a name on the place and a link with a # and the same name: add them one at a time.
• Mix it up: The menu of links goes in a nav, and the nav is part of the header.

Where it leads

Next lesson uses id again: a form label points at its box by id, so clicking the label finds the box. Class idea: find a long page (a Wikipedia article) and look at how its contents list jumps down the page.