Semantische HTML5-Tags helfen nicht deshalb, weil viele davon im Code stehen. Sie helfen, wenn sie die Hierarchie einer Seite klar lesbar machen.
Genau daran scheitern viele Layouts. <section> wird als hübscheres <div> benutzt, <article> landet an Stellen, die gar kein eigenständiger Inhalt sind, und <aside> fehlt komplett. Das Ergebnis sieht im Quellcode modern aus, sendet aber schwammige Signale an Suchmaschinen.
Semantik bringt nur etwas, wenn sie Prioritäten zeigt
Für die meisten Seiten brauchst du keine aufwendige Tag-Landschaft. In der Praxis reicht es oft, vier Dinge sauber zu markieren:
- der Kopfbereich der Seite
- das Seitenende
- der Hauptinhalt
- ergänzende Inhalte mit geringerem Gewicht
Dafür genügen meistens <header>, <footer>, <main>, <article> und <aside>.
So eine Struktur wirkt fast zu simpel. Genau das ist der Punkt. Sie macht deutlich, was wichtig ist, und lässt alles Unnötige weg.
Der Klassiker: <section> als Layout-Container
Der häufigste Fehler ist nicht kompliziert. Entwickler greifen zu semantischen Tags, obwohl eigentlich nur ein neutraler Container gebraucht wird.
Im Beispiel oben ist das <article> mit <h1> völlig in Ordnung. Problematisch sind die vielen <section>-Blöcke drum herum, die keinen eigenen thematischen Job haben.
<section> ist kein Deko-Element. Das Tag ist dafür gedacht, einen eigenständigen Inhalt in sinnvolle Teilbereiche zu gliedern. Wenn alles plötzlich eine Section ist, verliert die Struktur an Aussagekraft.
Wann <section> wirklich passt
Sinnvoll wird <section> dort, wo innerhalb eines Artikels echte Unterthemen entstehen. Eine Smartphone-Review ist dafür ein gutes Beispiel: Display, Kamera, Akku, Leistung, Design.
Jeder dieser Blöcke beantwortet eine eigene Frage. Jeder hat eine klare Überschrift. Und jeder könnte im Zweifel auch einzeln verstanden werden. Dann passt <section>.
Eine einfache Prüfung:
- behandelt der Block ein eigenständiges Unterthema?
- hat er eine eigene Überschrift, meist
<h2>oder<h3>? - ergibt der Abschnitt auch außerhalb des restlichen Artikels noch Sinn?
- wird hier nach Thema getrennt und nicht nur nach Optik?
Wenn du auf diese Fragen nicht sauber mit Ja antworten kannst, ist meist <div> die bessere Wahl.
<article> und <aside> ordnen die Wichtigkeit
Auch <article> wird oft zu breit eingesetzt. Ein <article> sollte für sich stehen können: Blogbeitrag, News-Meldung, Produktreview, Forenbeitrag.
Unterhalb des Hauptinhalts liegen auf vielen Seiten aber noch andere Module: verwandte Produkte, weiterführende Beiträge, Autorenboxen, Werbeblöcke oder Anmeldeformulare. Diese Elemente sind nicht wertlos, aber eben auch nicht der Kern der URL.
Genau dafür ist <aside> da. Das Tag signalisiert: Das hier gehört thematisch dazu, trägt aber nicht die Hauptaussage.
Praktisch gedacht:
<article>trägt die zentrale Botschaft der Seite<aside>ergänzt, stützt oder bewirbt, ohne im Mittelpunkt zu stehen
Ein <h1> pro Seite ist weiter die sicherste Regel
HTML5 erlaubt in bestimmten Konstruktionen mehrere <h1>. Für SEO bleibt die robusteste Praxis trotzdem dieselbe: eine URL, ein <h1>.
Dieser <h1> sollte im Haupt-<article> stehen. So bleibt für Suchmaschinen klar, welches Thema die Seite wirklich priorisiert.
Eine einfache Entscheidungslogik für die Struktur
Wenn du nicht lange diskutieren willst, arbeite dich in dieser Reihenfolge durch:
<header>für Kopfbereich, Logo, Navigation, Suche.<footer>für Abschluss, Meta-Links, Kontakt und Rechtliches.<main>genau einmal für den zentralen Seitenbereich.- Im
<main>ein<article>für den einzigartigen Kerninhalt der URL. <aside>für angrenzende, aber sekundäre Inhalte.<section>nur dann, wenn das Thema sinnvoll in eigene Teilkapitel zerfällt.
Wenn du bestehende Seiten überprüfen willst, lohnt sich vorher oft ein schneller Blick in ein Audit-Tool. Mit SEO Analyzer lässt sich zum Beispiel prüfen, ob technische Strukturprobleme mit anderen SEO-Signalen kollidieren.
Welche weiteren semantischen Tags sinnvoll sind
Semantik endet nicht bei den großen Blöcken. Auch im Fließtext gibt es ein paar Tags, die wirklich Nutzen bringen:
<strong>für echte Wichtigkeit<em>für sprachliche Betonung<mark>für gezielte Hervorhebungen<abbr>für Abkürzungen mit ausgeschriebener Form<figure>und<figcaption>für Bilder, Grafiken oder Codebeispiele mit Kontext<ul>und<ol>für logisch gruppierte Listen<table>und<caption>für tabellarische Daten mit eindeutiger Einordnung
Gerade Tabellen profitieren stark von sauberem Markup. Eine gute <caption> macht sofort verständlich, worum es in den Daten geht. Das hilft Nutzern, Screenreadern und auch Suchmaschinen.
Fazit
Semantische HTML5-Tags sind kein Sammelspiel. Mehr ist hier nicht besser.
Gut markiertes HTML nimmt Suchmaschinen Arbeit ab. Es zeigt, welcher Block der Kern ist, was nur Begleitmaterial ist und wie die Seite thematisch aufgebaut ist. Genau das verbessert die Chance, dass Inhalte sauber verstanden und passend eingeordnet werden.
Die beste Regel ist deshalb erstaunlich unspektakulär: so wenig Semantik wie möglich, so viel wie nötig.
Ressourcen
- Überblick zu semantischen HTML-Elementen bei W3Schools
- Tool zur Visualisierung der HTML5-Struktur: Semantic HTML5 Viewer
- Für einen schnellen Technik-Check deiner Website kannst du SeoSpeedup nutzen
