Die eigene Webseite komplett neu strukturieren

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

Zeit für eine große Übung: Wende alles aus diesem Block auf alle drei Seiten von Finns Webseite an, nicht nur auf die Startseite.

Ein wiederverwendbares Grundmuster

Header, Navigation und Footer sind auf jeder Seite (fast) identisch - das ist gewollt und gute Praxis: Besucher sollen sich auf jeder Unterseite sofort zurechtfinden. Das Grundmuster für jede Seite sieht deshalb immer so aus:

<body>

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

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

  <main>
    <!-- Hier unterscheidet sich jede Seite -->
  </main>

  <footer>
    <p>&copy; 2026 Finns Fußball-Webseite</p>
  </footer>

</body>

spieler.html umstrukturieren

Wende das Muster jetzt auf deine Spieler-Seite an, inklusive der Tabelle aus Block 5:

spieler.html

<body>

  <header>
    <h1>Meine Lieblingsspieler</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Start</a></li>
      <li><a href="spieler.html">Meine Lieblingsspieler</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>

  <main>
    <section>
      <h2>Meine Lieblingsspieler</h2>
      <table>
        <caption>Spieler, Position und Verein</caption>
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Verein</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Spieler A</td>
            <td>Stürmer</td>
            <td>Verein A</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Finns Fußball-Webseite</p>
  </footer>

</body>

kontakt.html umstrukturieren

Und dasselbe für die Kontaktseite mit dem Formular aus Block 6:

kontakt.html

<body>

  <header>
    <h1>Kontakt</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Start</a></li>
      <li><a href="spieler.html">Meine Lieblingsspieler</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>

  <main>
    <section>
      <p>Hast du eine Frage oder möchtest du dich vernetzen? Schreib mir gerne!</p>
      <form>
        <!-- Das vollständige Formular aus Kapitel 30 -->
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Finns Fußball-Webseite</p>
  </footer>

</body>

Dein Projekt im Überblick

Dein vollständig strukturiertes Projekt:

meine-webseite/
  index.html      (Startseite mit header/nav/main/footer)
  spieler.html    (Spielertabelle mit header/nav/main/footer)
  kontakt.html    (Kontaktformular mit header/nav/main/footer)
  bilder/
    ball.jpg
    training.jpg
    ...

Tipp: Block geschafft! Deine Webseite hat jetzt eine professionelle, semantisch saubere Struktur auf allen drei Seiten. Im nächsten Block lernst du noch ein paar wichtige Extras: mehr über Attribute, Meta-Informationen und Sonderzeichen.

Vorheriges Kapitel Hauptinhalt gliedern: main, section, article, aside Nächstes Kapitel Attribute vertieft: id und class als Namensschilder für später