Name the parts of a page

Students name the parts of a page with header, nav, main, section and footer, and learn that the names change nothing you can see but help screen readers and search engines.

Structure and style a page · Parts of a page · about 40 minutes · Open the student lesson

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 Present from the browser, or export to PowerPoint or PDF.
Worksheet Download Print the student copy; the Teacher edition has the answers.

Students will be able to

I can name the top, menu, content and bottom of a page with header, nav, main, section and footer.
I can explain why these tags change nothing you can see, and why they still matter.
I can put a list of links inside a nav.

Timing

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

Before class

Do the Make task yourself (about 5 minutes).

Section tags (<header>, <nav>, <main>, <section>, <footer>) add no look of their own. Their value is meaning: screen readers let people jump straight to the menu or the main content, and search engines know which part is which. Students expect a header to look like a header; Boxes shows the named parts and the plain page side by side.

Running the lesson

Predict: most students expect something to change. Compare the two files, then run it with Boxes on to see the named parts, and off to see nothing.
Investigate: the match task names each part. For why it matters, ask a student to imagine using a page only by listening to it.
Modify: footer first, then nav, then main with a section inside. With Boxes on, ask which box each part sits in.
Mix it up: two slips on one page, one in a rule and one in the menu. Ask which line each would change before they click.
Make: several answers are fine as long as the parts nest sensibly. A link list goes inside <nav>, and the <nav> inside the <header>.

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.

What will change? (predict, 3 min)
Compare the two files with your partner. Decide what changes on the page, then vote.

Most will pick a coloured bar or a row menu. Run it and keep the vote on the board: the surprise is the lesson.
Label a real page (end, 5 min)
Open a school or club website. Sketch it as boxes and write which of header, nav, main, section and footer each box would be.

Look for the menu inside the top part, and for pages where the footer holds the contact details.

The hard part (on purpose)

Section tags change nothing you can see, which feels like a mistake. Ask what header and footer are for if not looks; Boxes shows the named parts.

When students get stuck

What you will see	A question to ask	The fix
The page looks the same after adding header or footer.	Should it look different?	No. Section tags name parts; rules change how they look.
A closing tag such as </header> does not match its opening tag.	Did you close the part you opened last?	Close tags in the reverse order you opened them, so each part sits whole inside the next.
The links are not in a list, or sit outside the nav.	Is the <ul> inside the <nav>?	Put the whole <ul> between <nav> and </nav>.

Answers to the checks

Predict: after.html wraps the same words in header, nav, main, section and footer tags. What changes on the page?
Nothing you can see. These tags look like no tag at all; their names say what each part is.
Match the parts: Match each tag with the part of the page it names.
<header> → D. the top: the title and often the menu; <nav> → B. the main menu of links; <main> → E. the main content (one per page); <section> → A. one part of the content, with its own heading; <footer> → C. the bottom: contact details and small print
These tags name the parts of a page. They add no look of their own; rules decide how each part looks.
Why name the parts?: If <header> looks the same as no tag at all, why use it?
Screen readers and search engines can tell what each part is
A screen reader can jump straight to the menu or the main content, and a search engine knows which part is which. Your code is easier to read too.
Mix it up: The header should be navy with white text, but its words have vanished. Also, Rules should be a link, but nothing happens when you click it. Which two changes fix both?
Write background-color in the header rule, and put the word Rules between <a> and </a>
The browser ignores a property it does not know, so the header stays white and the white words vanish. The words people click go between <a> and </a>; here they sit outside an empty link.

Solutions

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

Modify › Name the bottom

<h1>Chess club</h1>
<ul>
  <li><a href="https://example.com/home">Home</a></li>
  <li><a href="https://example.com/rules">Rules</a></li>
</ul>
<h2>When we meet</h2>
<p>Wednesdays at lunch.</p>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>

Modify › Name the menu

<h1>Chess club</h1>
<nav>
  <ul>
    <li><a href="https://example.com/home">Home</a></li>
    <li><a href="https://example.com/rules">Rules</a></li>
  </ul>
</nav>
<h2>When we meet</h2>
<p>Wednesdays at lunch.</p>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>

Modify › Name the content

<h1>Chess club</h1>
<nav>
  <ul>
    <li><a href="https://example.com/home">Home</a></li>
    <li><a href="https://example.com/rules">Rules</a></li>
  </ul>
</nav>
<main>
  <section>
    <h2>When we meet</h2>
    <p>Wednesdays at lunch.</p>
  </section>
</main>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>

Make

<header>
  <h1>Robotics Club</h1>
  <nav>
    <ul>
      <li><a href="https://example.com/home">Home</a></li>
      <li><a href="https://example.com/join">Join</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>Build robots every Tuesday</h2>
    <p>No experience needed.</p>
  </section>
</main>
<footer>
  <p>Contact: robots@example.com</p>
</footer>

Stretch and support

Stretch: Add a second section with its own heading, and a rule that gives the header and the footer different background colours.

Support: Give students the Make starter with Boxes on and do the first part together: find the title and the list of links, and put them in a header.

Exit ticket

A student wraps a menu in <nav> and nothing changes on screen. Did it work? Why?

Yes. nav looks like no tag at all, but it tells browsers and screen readers that the part is the main menu, so people can jump to it.

What each step is for

Predict: Students expect header, nav and footer to change the look or position; they only name the parts.
Run: Section tags change nothing on screen; Boxes shows the named parts.
Investigate: Each tag names one part of a page, and naming is for screen readers and search engines, not for looks.
Modify: Wrap the right words in the right named tag: the page looks the same, but its parts now have names.
Mix it up: A page's parts hold lists and links, and rules colour them: a slip in any one shows.

Where it leads

Next lesson uses these parts: a menu in the nav that jumps to each section of a long page. Accessibility: these tags are called landmarks, and they are part of web accessibility guidelines. Class idea: compare a page built from these parts with one built from plain text, using a screen reader or the browser's accessibility view.