Semantisches HTML5

Semantisches HTML5 bedeutet, Tags zu wählen, die die Art des Inhalts beschreiben (<article>, <nav>, <main>), statt generische Tags (<div>, <span>), die keine Bedeutung tragen. Dieser Unterschied hilft Suchmaschinen und KIs direkt dabei, relevanten Inhalt vom Rest der Seite zu trennen.

Warum Semantik zählt

Ein <div> sagt nichts über seinen Inhalt aus: Es kann ebenso gut den Haupttext eines Artikels wie einen Werbeblock oder ein Navigationsmenü enthalten. Ein semantisches Tag hingegen trägt eine explizite Information über die Rolle des Blocks, den es umschließt. Für eine Maschine, die entscheiden muss, welcher Teil einer Seite den zu indexierenden oder zu zitierenden Hauptinhalt darstellt, ist diese Information direkt verwertbar, ohne aus unsicheren Heuristiken (Position, CSS-Klasse, Textmenge) erraten werden zu müssen.

Vor der Einführung von HTML5 nutzten Entwickler bereits Namenskonventionen, um ihren Tags Bedeutung zu geben (<div class="header">, <div class="nav">), doch diese CSS-Klassen tragen keinen standardisierten semantischen Wert: Eine Suchmaschine kann nicht sicher wissen, dass eine Klasse namens „header" tatsächlich einer Kopfzeile entspricht, da jeder Entwickler seine Klassen beliebig benennen kann. Semantische HTML5-Tags hingegen bilden ein gemeinsames, unmissverständliches Vokabular, das von jedem System, das HTML liest, auf dieselbe Weise interpretiert wird.

Die wichtigsten semantischen Tags

<body>
  <header>
    <nav><!-- Hauptmenü --></nav>
  </header>

  <main>
    <article>
      <h1>Titel des Artikels</h1>
      <section>
        <h2>Erster Teil</h2>
        <p>...</p>
      </section>
      <section>
        <h2>Zweiter Teil</h2>
        <p>...</p>
      </section>
    </article>
    <aside><!-- verwandter, nicht essenzieller Inhalt --></aside>
  </main>

  <footer><!-- Footer-Links, rechtliche Hinweise --></footer>
</body>

<header>: Kopfbereich einer Seite oder eines Abschnitts (nicht zwingend der visuelle obere Rand der Seite).
<nav>: Block mit Navigationslinks.
<main>: der einzige Hauptinhalt der Seite – nur ein <main>-Tag pro Seite.
<article>: eigenständiger Inhalt, der auch isoliert vom Rest der Seite Sinn ergäbe (ein Blogbeitrag, eine Produktseite).
<section>: thematische Gruppierung innerhalb eines Artikels oder einer Seite – nur zu verwenden, wenn der Abschnitt eine eigene logische Überschrift hat (in der Regel ein Hn-Tag), nicht als bloße visuelle Unterteilung.
<aside>: verwandter, aber nicht essenzieller Inhalt (verwandte Links, Werbeanzeige).
<footer>: Fußbereich einer Seite oder eines Abschnitts.

Relevanten Inhalt von Störfaktoren trennen

Eine Webseite enthält selten nur Hauptinhalt: Navigationsmenü, Cookie-Banner, Werbeblöcke und ein Footer mit rechtlichen Links und Social-Icons machen oft einen erheblichen Teil des HTML aus. Ohne semantische Strukturierung muss eine Maschine erraten, welcher Anteil des extrahierten Texts tatsächlich relevant ist. Ein korrektes Markup mit klar von <main> und <article> getrennten <nav>, <aside> und <footer> reduziert diesen Störanteil und lenkt die Aufmerksamkeit auf den Inhalt, der wirklich zählt – eine Frage, die direkt damit zusammenhängt, wie eine Suchmaschine Ihre Seite liest.

Auf manchen Websites machen Navigationsinhalte und periphere Elemente einen größeren Anteil des HTML aus als der Hauptinhalt selbst, besonders bei kurzen Seiten. In diesem Fall wird eine präzise semantische Strukturierung noch entscheidender, damit eine Maschine diesen Störanteil nicht gegenüber dem tatsächlich relevanten Text überbewertet.

Häufige Fehler

Alles in <div> mit CSS-Klassen codieren, ganz ohne semantische Tags – eine Praxis, die bei manchen von visuellen Buildern generierten Websites immer noch verbreitet ist.
Mehrere <main>-Tags auf derselben Seite verwenden.
Den redaktionellen Hauptinhalt durch einen Strukturfehler in ein <aside> platzieren.
<section> als reinen Style-Container ohne echte thematische Gruppierung verwenden.
Ein <article> innerhalb eines <nav> oder <aside> verschachteln, was der Logik dieser Tags widerspricht.

Ein Nutzen, der über SEO hinausgeht

Semantisches HTML5 verbessert auch die Barrierefreiheit: Screenreader stützen sich auf dieselben Tags, um einem sehbehinderten Nutzer zu ermöglichen, direkt zum Hauptinhalt zu springen, ohne auf jeder Seite das Menü durchgehen zu müssen. Ein und derselbe Strukturierungsaufwand dient somit gleichzeitig der Barrierefreiheit, dem klassischen SEO und dem GEO.

Eine bestehende Website auf eine semantische Struktur migrieren

Eine bereits mit generischen <div>s aufgebaute Website umzustrukturieren erfordert nicht zwingend einen kompletten Relaunch. In den meisten Fällen geht es darum, bestehende umschließende Tags durch ihr semantisches Äquivalent zu ersetzen (<div class="main-content"> wird zu <main>, <div class="site-footer"> wird zu <footer>), ohne das CSS anzufassen, das diese Elemente bereits über ihre Klasse anspricht. Diese schrittweise Migration, Template für Template, verbessert die Struktur, ohne das bestehende visuelle Layout zu gefährden – ein realistisches Vorhaben selbst auf einer bereits produktiven Website.

Um weiterzugehen, was diese Strukturierung ermöglicht, sobald der Text extrahiert ist, erklärt die Lektion zum Chunking, wie ein LLM diesen Inhalt anschließend in verwertbare Blöcke zerlegt, und die Lektion zu den strukturierten Daten von Schema.org zeigt, wie man in der Klarheit der übermittelten Informationen noch weiter gehen kann.