← Structure and style a page

Name the parts of a page

Name the top, menu, content and bottom of a page with header, nav, main, section and footer, and find out why they change nothing you can see.

Every website has the same parts: a top bar, a menu, the content, a footer. Screen readers let people jump straight to each one.

Most pages are built from the same parts: a top, a menu, the content and a bottom. Five tags give those parts their names, and the tags you already know go inside them.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

before.html
<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>
<p>Contact the teacher in charge.</p>
after.html
<header>
  <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>
</header>
<main>
  <section>
    <h2>When we meet</h2>
    <p>Wednesdays at lunch.</p>
  </section>
</main>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>

Compare the two files. They hold the same words, but after.html has five new tags. What changes on the page?

after.html wraps the same words in header, nav, main, section and footer tags. What changes on the page?

RunRun it and compare the result with your prediction.

Run

Compare with your prediction. Boxes is on, so you can see the named parts. Switch it off: the page looks like plain text.

Code What it does Why
<header> … </header> Names the top of the page Usually the site name and the menu. It looks like plain text; the name is the point
<nav> … </nav> Names the main menu of links The links inside are an ordinary list. nav does not turn them into a bar
<main> … </main> Names the main content One per page. A screen reader can jump straight past the menu to it
<section> … </section> Names one part of the content Usually starts with its own heading
<footer> … </footer> Names the bottom of the page Contact details and small print
nothing looks different The names are not for the eye Screen readers and search engines use them to find each part. Looks come from rules, as for any other tag
page.html
<header>
  <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>
</header>
<main>
  <section>
    <h2>When we meet</h2>
    <p>Wednesdays at lunch.</p>
  </section>
</main>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>
Try it yourselfYour edits are saved in this browser.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html
<header>
  <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>
</header>
<main>
  <section>
    <h2>When we meet</h2>
    <p>Wednesdays at lunch.</p>
  </section>
</main>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>

A whole page, named part by part.

They look the same as no tag at all.

Match each tag with the part of the page it names.

<header>
<nav>
<main>
<section>
<footer>

If <header> looks the same as no tag at all, why use it?

ModifyChange the code on purpose and check the result.

Modify

Put the contact line in a <footer>.

Need a hint?

The contact line is at the bottom of the page. Which tag names the bottom?

Another hint

Put <footer> before the contact paragraph and </footer> after it.

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.

Put the list of links in a <nav>. Turn Boxes on and off: the page looks the same.

Need a hint?

The list of links is the menu. Which tag names the main menu?

Another hint

Put <nav> before the <ul> and </nav> after its closing </ul>.

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.

Put the heading When we meet and its paragraph in a <section>, and the section in a <main>.

Need a hint?

<main> goes around the content, and <section> goes around one part of it, inside the main.

Another hint

Put the <h2> and its paragraph inside a section, and the section inside a main.

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.
Try it yourselfYour edits are saved in this browser.

Name the bottom of the page: put the contact line in a footer.

    This ticks when your page has all of the above.

    Name the menu: put the list of links in a nav.

      This ticks when your page has all of the above.

      Name the content: put the heading and its paragraph in a section inside a main.

        This ticks when your page has all of the above.

        InvestigateTrace how each line of code connects to what you see.

        Mix it up

        Two slips, one in the CSS and one in the menu.

        page.html
        <style>
  header {
    background-colour: navy;
    color: white;
  }
  footer {
    background-color: lightgray;
  }
</style>
<header>
  <h1>Chess club</h1>
  <nav>
    <ul>
      <li><a href="https://example.com/home">Home</a></li>
      <li>Rules<a href="https://example.com/rules"></a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>When we meet</h2>
    <p>Wednesdays at lunch.</p>
  </section>
</main>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>
        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?

        MakeBuild something new using what you have learned. Expect a few tries; that is normal.

        Make

        This club homepage is all plain text. Name its parts with <header>, <nav> (around the list of links), <main> with one <section>, and <footer>. Then change the words to a club of your own.

        Try it yourselfYour edits are saved in this browser.
        Need a hint?

        The title and the list of links go in <header>, with the list inside a <nav>.

        Another hint

        The heading and the paragraph about Tuesdays go in <main>, inside a <section>. The contact line goes in <footer>.

        Another hint

        Every opening tag needs its closing tag. Boxes shows whether your parts nest the way you meant.

        Show the expected result
        What the finished page looks like
        What it should look like. Your words can be different.

        Name the parts: a header, a nav holding a list of links, a main with a section, and a footer.

          This ticks when your page has all of the above.

          For teachers

          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. About 40 minutes.

          Open the teacher guide: answers, solutions, slides and a worksheet.

          Students will be able to

          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

          1. 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.
          2. Investigate: the match task names each part. For why it matters, ask a student to imagine using a page only by listening to it.
          3. Modify: footer first, then nav, then main with a section inside. With Boxes on, ask which box each part sits in.
          4. 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.
          5. Make: several answers are fine as long as the parts nest sensibly. A link list goes inside `<nav>`, and the `<nav>` inside the `<header>`.

          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

          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.

          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.

          What each step is for

          Now you can
          Next lesson11. A place on the pageGive a heading a name with id, then link to it with a