Hauptinhalt gliedern: main, section, article, aside

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

Nachdem Kopf, Navigation und Fuß geklärt sind, geht es jetzt um den wichtigsten Teil: den eigentlichen Inhalt der Seite. Dafür gibt es vier weitere semantische Elemente.

<main>: der Hauptinhalt

<main> markiert den einzigartigen, wichtigsten Inhalt einer Seite - alles, was nicht Navigation, Kopf- oder Fußbereich ist. Eine Regel dabei: <main> darf auf jeder Seite nur einmal vorkommen.

<main>
  <!-- Der Hauptinhalt der Seite kommt hier hinein -->
</main>

<section>: thematische Abschnitte

<section> gruppiert einen zusammengehörigen thematischen Abschnitt innerhalb der Seite - meistens mit einer eigenen Überschrift:

<section>
  <h2>Meine Hobbys</h2>
  <ul>
    <li>Fahrrad fahren</li>
    <li>Zeichnen</li>
  </ul>
</section>

Eine gute Faustregel: Wenn ein Abschnitt eine eigene Überschrift hätte, wenn er in einem Inhaltsverzeichnis stünde, ist <section> meistens die richtige Wahl.

<article>: eigenständiger Inhalt

<article> markiert Inhalt, der auch für sich allein, komplett losgelöst vom Rest der Seite, Sinn ergeben würde - zum Beispiel ein Blogbeitrag, eine Produktkarte, oder ein einzelner Spielbericht:

<article>
  <h2>Spielbericht: Unser Sieg am Samstag</h2>
  <p>Wir haben 3 zu 1 gewonnen! Ich habe selbst ein Tor geschossen.</p>
</article>

<section> vs. <article>: der Unterschied

Diese beiden werden oft verwechselt. Die Faustregel: Frag dich, ob der Inhalt auch komplett losgelöst von der restlichen Seite, zum Beispiel wenn man ihn kopieren und auf eine andere Seite einfügen würde, für sich allein Sinn ergeben würde.

<article>: ja, würde für sich allein Sinn ergeben (ein Spielbericht, ein Blogpost).
<section>: nein, braucht den Kontext der restlichen Seite ("Meine Hobbys" ergibt nur im Zusammenhang mit "das ist Finns Webseite" wirklich Sinn).

Ein <article> kann sogar <section>-Elemente enthalten, wenn der eigenständige Artikel selbst mehrere Themenabschnitte hat - und umgekehrt kann eine <section> mehrere <article>-Elemente enthalten (zum Beispiel ein Abschnitt "Neuigkeiten" mit mehreren einzelnen Artikeln darin).

<aside>: nebensächlicher Inhalt

<aside> markiert Inhalt, der zwar irgendwie mit dem Hauptthema zu tun hat, aber nicht der eigentliche Kern ist - vergleichbar mit einer Randspalte oder einem Info-Kasten in einer Zeitung:

<aside>
  <h3>Wusstest du schon?</h3>
  <p>Der schnellste Elfmeter der Fußballgeschichte wurde nach nur 2,8 Sekunden geschossen!</p>
</aside>

Finns Startseite vollständig strukturieren

Bringen wir jetzt alles zusammen - so könnte der Aufbau von index.html aussehen:

index.html

<body>

  <header>
    <h1>Finns Fußball-Webseite</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>Über mich</h2>
      <p>Hallo! Ich bin Finn und ich liebe Fußball ...</p>
    </section>

    <article>
      <h2>Spielbericht: Unser Sieg am Samstag</h2>
      <p>Wir haben 3 zu 1 gewonnen! Ich habe selbst ein Tor geschossen.</p>
    </article>

    <section>
      <h2>Meine Hobbys</h2>
      <ul>
        <li>Fahrrad fahren</li>
        <li>Zeichnen</li>
      </ul>
    </section>

    <aside>
      <h3>Wusstest du schon?</h3>
      <p>Der schnellste Elfmeter der Fußballgeschichte wurde nach nur 2,8 Sekunden geschossen!</p>
    </aside>

  </main>

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

</body>

Tipp: Übertrage deine restlichen bestehenden Abschnitte (Verein, Fotos, Video, Formular-Link usw.) sinngemäß in <section>- oder <article>-Elemente innerhalb von <main>, so wie es inhaltlich am besten passt.

Vorheriges Kapitel Kopf- und Fußbereich: header, footer, nav Nächstes Kapitel Die eigene Webseite komplett neu strukturieren