Consistent header/footer

Write the header and footer repeated across all pages.

Consistent header and nav

Every page of a multi-page site shows the same <header>. Inside the header goes a <nav>; the nav carries the brand link and the page links. This way the visitor finds the same menu on every page.

For example, Cheese Magazine's nav holds four links: home, articles, about and contact. The brand link usually points to href="/" for the home page.

Footer and address

At the bottom of the page sits the <footer>. The footer usually holds contact details, copyright text and secondary links. Contact details go inside an <address> tag, which is designed specifically to carry contact information.

Exercise Add the header and footer

Add a <header> inside body. Inside the header put a <nav> with at least four links (brand + three pages). Then add a <footer>; inside the footer put an <address> (magazine address) and a <p> holding the copyright line.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cheese Magazine</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Cheese Magazine</a>
        <a href="/articles">Articles</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </nav>
    </header>
    <footer>
      <address>
        Cheese Magazine, Brooklyn, NY
      </address>
      <p>(c) 2026 Cheese Magazine</p>
    </footer>
  </body>
</html>

Test yourself

Where do the primary navigation links go?
- Inside header in a nav
- Inside footer in a nav
- Inside main in a nav
- Inside aside in a nav
Show answer

Inside header in a nav — Correct. Primary navigation lives in the nav inside the header.

Complete the copyright line in the footer

<footer><address>Cheese Magazine</address><p>(c) 2026 Cheese ____</p></footer>

Show answer

<footer><address>Cheese Magazine</address><p>(c) 2026 Cheese Magazine</p></footer>

Match the landmark to its typical content

header

Logo and nav
footer

address and copyright
nav

Page links
address

Contact details

Next lesson: Home page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies