Ein <div> ist für den Browser eine leere Hülle – er weiß nicht, was drin steckt. Ein <article> dagegen sagt: das hier ist ein eigenständiger Inhalt. Ein <nav> sagt: das hier sind Navigationslinks. Genau diese Information nutzen Google und Screenreader, um deine Seite zu verstehen – und das hat direkte Auswirkungen auf SEO und Barrierefreiheit.
Abschnitte: Was Google daraus macht, Was Screenreader daraus machen, Die wichtigsten Tags im Überblick, Vorher / Nachher.
Was Google daraus macht
Googles Crawler liest HTML wie ein strukturiertes Dokument. Semantische Tags helfen ihm dabei, Prioritäten zu setzen:
<main>– hier liegt der Hauptinhalt der Seite, den Google am stärksten gewichtet.<article>– eigenständiger, indexierbarer Inhalt. Google erkennt ihn als primären Textinhalt.<aside>– Ergänzungsinhalte, Sidebar, Hinweise. Google gewichtet diese Bereiche bewusst niedriger.<nav>– Navigationslinks. Google nutzt sie um die Seitenstruktur zu verstehen, wertet den Text darin aber nicht als Inhalt.<footer>– Impressum, Copyright, Links. Ebenfalls geringere SEO-Gewichtung.
Kurz gesagt: Was in <main> und <article> steht, zählt. Was in <aside> oder <footer> steht, ist Beiwerk.
Was Screenreader daraus machen
Screenreader – Software die blinden oder sehbehinderten Nutzern Webseiten vorliest – nutzen semantische Tags als Orientierungspunkte. Der Nutzer kann damit direkt zu bestimmten Bereichen springen, ohne die gesamte Seite durchzuhören:
<main>– "Zum Hauptinhalt springen" – jeder Screenreader kennt diesen Sprung.<nav>– wird als Navigationsbereich angesagt, der Nutzer kann ihn gezielt aufrufen oder überspringen.<header>/<footer>– werden als Kopf- und Fußbereich der Seite erkannt.<aside>– wird als ergänzender Bereich angesagt, nicht als Hauptinhalt.
Mit einer Seite voller <div>-Elemente hat ein Screenreader keine dieser Anhaltspunkte – der Nutzer muss sich durch den gesamten Quellcode hören.
Die wichtigsten Tags im Überblick
<main>– Hauptinhalt der Seite. Nur einmal pro Seite verwenden.<article>– eigenständiger Inhalt der auch für sich alleine stehen kann (Blogpost, Tutorial, Foreneintrag).<section>– thematischer Abschnitt innerhalb einer Seite oder eines Articles. Immer mit einer Überschrift.<nav>– Navigationsbereich mit Links.<aside>– ergänzender Inhalt, Sidebar, Hinweisboxen.<header>– Kopfbereich eines Dokuments oder Abschnitts.<footer>– Fußbereich eines Dokuments oder Abschnitts.
Vorher / Nachher
So sieht eine typische Seite ohne Semantik aus – und wie sie mit semantischen Tags aussehen sollte:
<!-- Ohne Semantik – alles div -->
<div id="header">…</div>
<div id="nav">…</div>
<div id="content">
<div class="post">…</div>
<div class="sidebar">…</div>
</div>
<div id="footer">…</div><!-- Mit Semantik -->
<header>…</header>
<nav>…</nav>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>Beide Varianten sehen im Browser identisch aus. Für Google und Screenreader ist der Unterschied erheblich.