Header, menu, and footer · Code with Martin

Give your page real structure like actual websites have: a header with a menu up top, and a footer below.

Show me: every website has the same parts

Look at any big website: up top there’s a header with a name and a menu, in the middle there’s content, and at the bottom there’s a footer with the small stuff. HTML has dedicated tags for these parts:

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>

<header> – the header: the website’s name and menu. It’s the same on every page.
<nav> – navigation, i.e. the menu with links.
<main> – the main content, different on every page.
<footer> – the footer: who made the site, contact info, the year.

💡

Visually, not much will change for now – these tags aren’t visible themselves. So why bother writing them? Because they bring order to your code: browsers, search engines, and screen readers all use them to know what’s a menu and what’s content. And best of all – in upcoming lessons we’ll style them, so the menu will actually look like a real menu.

Your turn 💪

On index.html, wrap your existing content in these parts: a <header> at the top with an <h1> and a <nav> (links to both of your pages), a <main> in the middle with the rest of the content, and a <footer> at the bottom.
Do the same on your second page. The header and footer should be exactly the same on both pages – just copy them over.
Save, refresh, click around: does the menu work from both pages?

🏫 School website – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>

🙋 Personal website – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>

🌍 Travel journal – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>

⚽ Club website – solution (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>

✅

Check yourself: Both pages have the same name and menu at the top, a footer at the bottom, and the menu switches you between pages. Structure’s done – now we can dive into how it looks!

What to take away from this lesson

A page has parts: <header> (header with menu), <main> (content), <footer> (footer).
The menu is a <nav> with links, and it’s the same on every page.
Order in your code = the foundation you can build a look on top of.