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.
The Cheese Magazine footer shows the address and the copyright year (c) 2026 together. The footer also stays the same on every page.
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