Header and Footer Areas: header, footer, nav

~8 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

Let's start with the three elements found on almost every website in the world: <header>, <nav>, and <footer>.

<header>: the top area

<header> marks the introductory area of a page (or a section) - typically holding a logo, the main heading, and sometimes the navigation:

<header>
  <h1>Finn's Football Website</h1>
</header>

Achtung: Don't confuse <header> with <head>! <head> (from chapter 4) holds invisible page information like <title> and appears once, right at the top of the file. <header> is a visible area inside <body> and can even appear multiple times on a page (for example once for the whole page and once for a single article).

<nav> marks an area with a page's most important links - typically the main menu:

<nav>
  <a href="index.html">Home</a>
  <a href="players.html">Players</a>
  <a href="contact.html">Contact</a>
</nav>

Tipp: Often a <ul> list with the links sits inside <nav>, since a navigation is basically a list of options - we'll do that in practice right away.

<footer>: the bottom area

<footer> marks the closing area of a page - typically copyright notices, contact info, or legal information:

<footer>
  <p>&copy; 2026 Finn's Football Website</p>
</footer>

Adding all three to Finn's home page

Now wrap header, navigation, and footer around the existing content of index.html:

index.html

<body>

  <header>
    <h1>Finn's Football Website</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="players.html">My Favourite Players</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

  <!-- All the existing content (About Me, Hobbies, Club, ...) stays
       here unchanged. -->

  <footer>
    <p>&copy; 2026 Finn's Football Website</p>
  </footer>

</body>

Visually, almost nothing changes in the browser again (as expected - that's the whole point of semantic HTML). But now your page has a clear, machine-readable structure: header, navigation, content, footer.

Tipp: © in <footer> is an example of what's called an "entity": a text sequence the browser turns into a special character - here, the copyright sign ©. We'll look at this closer in block 8.

Vorheriges Kapitel Why <div> and <span> Alone Aren't Enough Nächstes Kapitel Structuring the Main Content: main, section, article, aside

Header and Footer Areas: header, footer, nav

Header and Footer Areas: header, footer, nav

<header>: the top area

<nav>: the navigation

<footer>: the bottom area

Adding all three to Finn's home page