Restructuring Your Whole Website

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

Time for a big exercise: apply everything from this block to all three pages of Finn's website, not just the home page.

A reusable basic pattern

Header, navigation, and footer are (almost) identical on every page - that's intentional and good practice: visitors should immediately find their way around on any subpage. The basic pattern for every page therefore always looks like this:

<body>

  <header>
    <h1>...</h1>
  </header>

  <nav>
    <ul>...</ul>
  </nav>

  <main>
    <!-- This differs on every page -->
  </main>

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

</body>

Restructuring players.html

Now apply the pattern to your players page, including the table from block 5:

players.html

<body>

  <header>
    <h1>My Favourite Players</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>

  <main>
    <section>
      <h2>My Favourite Players</h2>
      <table>
        <caption>Player, position, and club</caption>
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Club</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Player A</td>
            <td>Striker</td>
            <td>Club A</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>

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

</body>

Restructuring contact.html

And the same for the contact page with the form from block 6:

contact.html

<body>

  <header>
    <h1>Contact</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>

  <main>
    <section>
      <p>Have a question or want to connect? Feel free to write to me!</p>
      <form>
        <!-- The complete form from chapter 30 -->
      </form>
    </section>
  </main>

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

</body>

Your project at a glance

Your fully structured project:

my-website/
  index.html      (home page with header/nav/main/footer)
  players.html    (player table with header/nav/main/footer)
  contact.html    (contact form with header/nav/main/footer)
  images/
    ball.jpg
    training.jpg
    ...

Tipp: Block complete! Your website now has a professional, semantically clean structure across all three pages. The next block covers a few more important extras: more about attributes, meta information, and special characters.

Vorheriges Kapitel Structuring the Main Content: main, section, article, aside Nächstes Kapitel Attributes Deep Dive: id and class as Name Tags for Later