Semantische Strukturierung mit HTML5 einfach erklärt

·

Sladjan Lazic

Eine Webseite besteht aus vielen Teilen. Sie hat in der Regel einen Kopfbereich, ein Menü, einen Hauptinhalt, zusätzliche Hinweise und einen Abschluss. Diese Teile kann man mit einfachen <div>-Elementen bauen. Doch ein <div> sagt nicht, welche Aufgabe ein Bereich hat. Dafür liefert HTML5 die Elemente <header>, <nav>, <section>, <article>, <aside> und <footer>. Diese Elemente geben einer Webseite Bedeutung. Man spricht deshalb von semantischem HTML. Semantisch bedeutet, dass der HTML-Code nicht nur das Aussehen beschreibt, sondern auch den Sinn eines Inhalts. In diesem Blogartikel lernst du die Bedeutung der semantischen Strukturierung mit HTML5.

HTML: Warum ist eine semantische Struktur wichtig?

Stelle dir eine Zeitung ohne Überschriften und ohne erkennbare Bereiche vor. Alle Texte würden einfach untereinanderstehen. Das Lesen wäre mühsam.

Bei einer Webseite ist es ähnlich. Eine gute Struktur hilft Menschen und Programmen, den Inhalt zu verstehen.

Semantisches HTML hat mehrere Vorteile:

  1. Der Code ist leichter zu lesen. Andere Entwicklerinnen und Entwickler erkennen schnell, wo das Menü oder ein Artikel beginnt.
  2. Die Webseite ist leichter zu pflegen. Inhalte lassen sich einfacher finden und ändern.
  3. Hilfsprogramme bekommen nützliche Informationen. Ein Screenreader kann wichtige Bereiche wie Navigation oder Seitenende erkennen.
  4. Suchmaschinen verstehen den Aufbau besser. Semantik kann ihnen helfen, Inhalte richtig einzuordnen. Sie ist aber kein automatischer Weg zu einem besseren Ranking.
  5. CSS bleibt übersichtlich. Elemente können direkt ausgewählt und gestaltet werden.

Wichtig: Semantische Elemente bestimmen nicht automatisch das Aussehen. Ein <header> muss nicht oben bleiben. Ein <aside> muss nicht rechts stehen. Für die Darstellung ist CSS zuständig. HTML beschreibt die Bedeutung.

Das Grundbild einer Webseite

Eine typische Seite kann vereinfacht so aufgebaut sein:

<body>
  <header>...</header>

  <nav>...</nav>

  <main>
    <article>
      <header>...</header>
      <section>...</section>
      <aside>...</aside>
      <footer>...</footer>
    </article>
  </main>

  <footer>...</footer>
</body>

Neben den sechs Elementen aus diesem Artikel siehst du hier auch <main>. Dieses Element kennzeichnet den wichtigsten Inhalt der Seite. Es gehört meist zwischen Navigation und Seiten-Fußbereich. Pro Seite sollte es normalerweise nur einen sichtbaren Hauptbereich geben.

Nun betrachten wir die Elemente genauer.

1. Der Kopfbereich mit dem Header-Element

Header bedeutet Kopfbereich. Ein <header> enthält einleitende Informationen für eine Seite oder für einen bestimmten Bereich.

Im Kopfbereich der ganzen Webseite stehen oft:

  • der Name oder das Logo der Website
  • die Hauptüberschrift
  • ein kurzer Slogan
  • eine Suche
  • manchmal die Hauptnavigation

Ein einfacher Seitenkopf sieht so aus:

<header>
  <a href="/">Gartenfreude</a>
  <p>Einfache Tipps für einen grünen Balkon</p>
</header>

Auch ein Artikel darf einen eigenen Kopfbereich haben

Viele Anfängerinnen und Anfänger denken, dass eine Seite nur einen <header> haben darf. Das stimmt nicht.

Auch ein einzelner Artikel kann einen eigenen Kopfbereich besitzen.

<article>
  <header>
    <h2>Tomaten auf dem Balkon pflanzen</h2>
    <p>Veröffentlicht am 3. August 2026</p>
  </header>

  <p>Tomaten brauchen viel Licht und regelmäßig Wasser.</p>
</article>

Der äußere Seitenkopf beschreibt die ganze Website. Der innere Kopfbereich beschreibt nur den Artikel.

Was gehört nicht in einen Kopfbereich?

Ein <header> ist kein Behälter für alles, was zufällig ganz oben angezeigt wird.

Entscheidend ist seine Aufgabe: Der Inhalt soll in die Seite oder den umgebenden Bereich einführen.

Ein <header> darf außerdem nicht direkt in einem anderen <header> stehen.

2. Die Navigation mit dem Nav-Element

Das Element <nav> kennzeichnet eine wichtige Gruppe von Navigationslinks.

Das kann die Hauptnavigation einer Website sein. Auch ein Inhaltsverzeichnis oder eine Navigation innerhalb einer Seite kann mit <nav> ausgezeichnet werden.

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="/ratgeber">Ratgeber</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Die Liste ist sinnvoll, weil die Links zusammengehören. Sie ist aber nicht zwingend vorgeschrieben.

Darf es mehrere Navigationen geben?

Ja. Eine Seite kann zum Beispiel eine Hauptnavigation und ein Inhaltsverzeichnis haben.

Dann sollten die Bereiche verständliche Namen bekommen:

<nav aria-label="Hauptnavigation">
  <!-- Links zu wichtigen Seiten -->
</nav>

<nav aria-label="Inhaltsverzeichnis">
  <!-- Links zu Abschnitten auf dieser Seite -->
</nav>

Das Attribut aria-label hilft besonders dann, wenn mehrere Navigationen vorkommen.

Ein Screenreader kann ihre Aufgaben dadurch unterscheiden.

Muss jeder Link in einer Navigation stehen?

Nein. Ein einzelner Link im Text braucht kein <nav>.

Auch eine kleine Linkgruppe im Fußbereich benötigt nicht automatisch dieses Element.

<nav> ist für wichtige Navigationsblöcke gedacht.

3. Thematische Abschnitte mit dem Section-Element

Eine <section> ist ein thematischer Abschnitt eines Dokuments.

Die Inhalte in diesem Bereich behandeln ein gemeinsames Thema.

Eine Section sollte in der Regel eine Überschrift haben:

<section>
  <h2>Der richtige Standort</h2>
  <p>
    Tomaten wachsen am besten an einem sonnigen und
    geschützten Platz.
  </p>
</section>

Ein langer Ratgeber kann in mehrere Sections aufgeteilt werden:

<article>
  <h1>Tomaten auf dem Balkon</h1>

  <section>
    <h2>Der richtige Topf</h2>
    <p>Der Topf sollte groß genug sein.</p>
  </section>

  <section>
    <h2>Gießen und Düngen</h2>
    <p>Gieße regelmäßig und vermeide Staunässe.</p>
  </section>
</article>

Wann ist ein Div-Element besser?

Nicht jede Gruppe braucht eine inhaltliche Bedeutung.

Wenn du Elemente nur für CSS zusammenfasst, ist ein <div> oft die bessere Wahl.

<div class="karten-raster">
  <!-- Diese Gruppe dient nur dem Layout. -->
</div>

Eine einfache Prüffrage lautet:

Hat der Bereich ein eigenes Thema und eine passende Überschrift?

Wenn ja, kann <section> richtig sein.

Wenn der Behälter nur Abstände, Farben oder Spalten steuert, solltest du eher ein <div> verwenden.

4. Eigenständige Inhalte mit dem Article-Element

Ein <article> enthält einen eigenständigen Inhalt.

Der Inhalt sollte auch außerhalb der aktuellen Seite verständlich und sinnvoll sein.

Typische Beispiele sind:

  • ein Blogbeitrag
  • eine Nachricht
  • ein Forenbeitrag
  • ein Kommentar
  • eine Produktkarte
  • eine Bewertung
  • ein eigenständiger Beitrag in einer Liste

Ein einfaches Beispiel:

<article>
  <h2>Drei robuste Kräuter für Anfänger</h2>
  <p>
    Thymian, Schnittlauch und Minze sind leicht zu pflegen.
  </p>
  <a href="/kraeuter-fuer-anfaenger">Artikel lesen</a>
</article>

Auf einer Übersichtsseite dürfen mehrere Articles stehen:

<main>
  <h1>Neue Beiträge</h1>

  <article>
    <h2>Basilikum richtig gießen</h2>
    <p>So bleibt die Pflanze länger gesund.</p>
  </article>

  <article>
    <h2>Salat im Balkonkasten</h2>
    <p>Auch wenig Platz reicht für eine kleine Ernte.</p>
  </article>
</main>

Der Unterschied zwischen Article und Section

Diese beiden Elemente werden oft verwechselt.

Ein <article> ist eigenständig. Er könnte einzeln veröffentlicht, geteilt oder in einem Feed angezeigt werden.

Eine <section> ist ein thematischer Teil eines größeren Inhalts.

Ein Blogbeitrag ist also oft ein <article>. Seine einzelnen Kapitel können mit <section> gegliedert werden.

Eine hilfreiche Frage für das Article-Element lautet:

Kann dieser Inhalt auch allein veröffentlicht werden und trotzdem sinnvoll bleiben?

Wenn die Antwort Ja lautet, ist <article> wahrscheinlich geeignet.

Article-Elemente innerhalb einer Section

Auch die umgekehrte Verschachtelung ist möglich.

Eine Seite kann zum Beispiel eine Section mit Kundenstimmen enthalten. Jede einzelne Kundenstimme kann darin als Article stehen.

<section>
  <h2>Kundenstimmen</h2>

  <article>
    <h3>Bewertung von Anna</h3>
    <p>Die Anleitung war leicht verständlich.</p>
  </article>

  <article>
    <h3>Bewertung von Deniz</h3>
    <p>Mein erster Salat wächst bereits.</p>
  </article>
</section>

Die Bedeutung entscheidet über das Element, nicht die gewünschte Darstellung.

5. Ergänzende Inhalte mit dem Aside-Element

Ein <aside> enthält Informationen, die zum Umfeld passen, aber nicht zum Hauptgedanken gehören.

Der Hauptinhalt sollte auch ohne diesen Bereich verständlich bleiben.

Typische Inhalte sind:

  • weiterführende Links
  • zusätzliche Erklärungen
  • eine Infobox
  • ein Autorenprofil
  • Werbung
  • verwandte Beiträge
  • Hintergrundinformationen

Ein einfacher Hinweis kann so ausgezeichnet werden:

<aside>
  <h2>Gut zu wissen</h2>
  <p>
    Dunkle Töpfe werden in der Sonne schneller warm.
  </p>
</aside>

Ein Aside innerhalb eines Artikels bezieht sich meistens auf diesen Artikel.

Ein Aside neben dem Hauptinhalt kann ergänzende Informationen zur gesamten Seite enthalten.

Ein ergänzender Bereich ist nicht einfach eine rechte Spalte

Das Aside-Element wird oft mit „Seitenleiste“ übersetzt.

Trotzdem beschreibt <aside> keine bestimmte Position.

Ein Aside kann rechts, links oder mitten im Text erscheinen. CSS regelt seine Position.

Nicht jeder Inhalt in einer Seitenspalte ist automatisch ein Aside. Umgekehrt darf ein Aside auch ohne sichtbare Seitenleiste verwendet werden.

Entscheidend ist die Bedeutung: Der Inhalt ist ergänzend und vom Hauptinhalt abtrennbar.

6. Der Fußbereich mit dem Footer-Element

Footer ist der Fußbereich.

Ein <footer> enthält abschließende Informationen für die ganze Seite oder für den nächsten übergeordneten Inhaltsbereich.

Im Footer einer Website stehen häufig:

  • Copyright-Angaben
  • Kontaktinformationen
  • Links zum Impressum und Datenschutz
  • Hinweise zum Betreiber
  • weiterführende Links

Ein einfacher Footer sieht so aus:

<footer>
  <p>© 2026 Gartenfreude</p>
  <p><a href="/impressum">Impressum</a></p>
  <p><a href="/datenschutz">Datenschutz</a></p>
</footer>

Ein Footer muss nicht am unteren Rand des Bildschirms festkleben.

Das wäre eine Frage des CSS-Layouts.

Ein Artikel kann einen eigenen Footer haben

Wie beim Header sind auch mehrere Footer auf einer Seite erlaubt.

<article>
  <h2>Tomaten richtig pflegen</h2>
  <p>Hier steht der eigentliche Artikel.</p>

  <footer>
    <p>Autorin: Mia Beispiel</p>
    <p>Zuletzt aktualisiert am 3. August 2026</p>
  </footer>
</article>

Dieser Footer beendet den Artikel.

Ein weiterer Footer am Ende der Webseite kann Informationen enthalten, die für die gesamte Seite gelten.

Eine vollständige Beispielseite

Das folgende Beispiel verbindet alle sechs Elemente. Zusätzlich kommt <main> für den zentralen Seiteninhalt zum Einsatz.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Tomaten auf dem Balkon</title>
  </head>

  <body>
    <header>
      <h1>Gartenfreude</h1>
      <p>Einfache Tipps für einen grünen Balkon</p>
    </header>

    <nav aria-label="Hauptnavigation">
      <ul>
        <li><a href="/">Startseite</a></li>
        <li><a href="/gemuese">Gemüse</a></li>
        <li><a href="/kraeuter">Kräuter</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
      </ul>
    </nav>

    <main>
      <article>
        <header>
          <h1>Tomaten auf dem Balkon pflanzen</h1>
          <p>Veröffentlicht am 3. August 2026</p>
        </header>

        <p>
          Auch auf einem kleinen Balkon können Tomaten
          wachsen. Die Pflanze braucht Sonne, Wasser
          und ausreichend Platz.
        </p>

        <section>
          <h2>Der passende Standort</h2>
          <p>
            Stelle die Pflanze an einen sonnigen und
            geschützten Ort.
          </p>
        </section>

        <section>
          <h2>Der richtige Topf</h2>
          <p>
            Verwende einen großen Topf mit einem Loch
            im Boden.
          </p>

          <aside>
            <h3>Tipp</h3>
            <p>
              Ein Untersetzer schützt den Boden vor
              auslaufendem Wasser.
            </p>
          </aside>
        </section>

        <section>
          <h2>Richtig gießen</h2>
          <p>
            Prüfe die Erde regelmäßig und gieße
            direkt am Boden.
          </p>
        </section>

        <footer>
          <p>Autorin: Mia Beispiel</p>
          <p>Kategorie: Gemüse auf dem Balkon</p>
        </footer>
      </article>

      <aside>
        <h2>Weitere Themen</h2>
        <ul>
          <li>
            <a href="/basilikum">Basilikum pflegen</a>
          </li>
          <li>
            <a href="/salat">
              Salat im Balkonkasten anbauen
            </a>
          </li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>© 2026 Gartenfreude</p>
      <a href="/impressum">Impressum</a>
      <a href="/datenschutz">Datenschutz</a>
    </footer>
  </body>
</html>

Semantisches HTML und Barrierefreiheit

Eine gute HTML-Struktur kann die Bedienung einer Webseite erleichtern.

Screenreader erkennen bestimmte Bereiche als Orientierungspunkte. Nutzerinnen und Nutzer können dadurch zum Beispiel schneller zur Navigation oder zum Hauptinhalt wechseln.

Semantische Elemente ersetzen aber keine vollständige Prüfung der Barrierefreiheit.

Beachte zusätzlich:

  • Verwende eine logische Reihenfolge der Überschriften.
  • Schreibe verständliche Linktexte.
  • Gib Bildern passende Alternativtexte.
  • Achte auf ausreichende Farbkontraste.
  • Sorge dafür, dass die Seite mit der Tastatur bedienbar ist.
  • Halte die Reihenfolge im HTML logisch.
  • Benenne mehrere gleichartige Bereiche eindeutig.
  • Verwende zuerst das passende HTML-Element.
  • Zusätzliche ARIA-Rollen sind bei diesen Standardfällen meist nicht nötig.

Ein <nav> besitzt bereits die Bedeutung einer Navigation. Eine zusätzliche Angabe wie role="navigation" wiederholt diese Information lediglich.

Kurze Checkliste vor der Veröffentlichung

Prüfe deine Seite zum Schluss:

  • Gibt es einen klaren Hauptinhalt?
  • Hat die Seite eine verständliche Hauptüberschrift?
  • Folgen die weiteren Überschriften einer logischen Reihenfolge?
  • Enthält <nav> nur wichtige Navigationsbereiche?
  • Haben Sections ein eigenes Thema und meistens eine Überschrift?
  • Sind Articles auch einzeln sinnvoll?
  • Enthalten Asides wirklich ergänzende Informationen?
  • Ist klar, welcher Header oder Footer zu welchem Bereich gehört?
  • Ist die Reihenfolge im HTML auch ohne CSS verständlich?
  • Wird <div> dort verwendet, wo keine besondere Bedeutung nötig ist?

Semantische Strukturierung mit HTML5 – Fazit

Semantisches HTML macht aus einer Sammlung allgemeiner Behälter eine verständlich aufgebaute Webseite. Das Header-Element führt in eine Seite oder einen Bereich ein, während das Nav-Element wichtige Navigationen kennzeichnet. Mit dem Section-Element gliederst du Inhalte in thematische Abschnitte. Das Article-Element verwendest du für eigenständige Beiträge. Ergänzende Informationen zeichnest du mit dem Aside-Element aus. Das Footer-Element schließt eine Seite oder einen Inhaltsbereich ab.

Die wichtigste Regel lautet: Wähle ein HTML-Element nach seiner Bedeutung und nicht nach seinem Aussehen. Wenn du diese Regel beachtest, wird dein Code klarer und leichter zu pflegen. Gleichzeitig erhalten Browser, Suchmaschinen und Hilfsprogramme bessere Informationen über den Aufbau deiner Webseite. Damit schaffst du eine solide Grundlage für verständliche, zugängliche und moderne Webseiten mit HTML5.

Sladjan Lazic
Latest posts by Sladjan Lazic (see all)

Das könnte dich auch interessieren

Comments

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert