Semantisches HTML: Struktur für Mensch und Maschine

Zwei Webseiten können im Browser identisch aussehen und im Quellcode völlig unterschiedlich verständlich sein.

Die eine Seite besteht fast nur aus verschachtelten <div>-Containern. Die andere nutzt semantische HTML5-Elemente (Hypertext Markup LanguageHyperText Markup Language (HTML) ist die Auszeichnungssprache für Webseiten. Mit ihr werden Struktur und Inhalt einer Seite definiert, etwa Überschriften, Absätze, Links und Bilder.Zum Glossareintrag →, HTML, die Auszeichnungssprache für Webseiten) wie <main>, <article>, <nav>, <section>, <aside> und <footer>. Für Nutzer ist der Unterschied oft unsichtbar. Für Browser, Screenreader, Suchmaschinen und Crawler ist er relevant.

Genau hier setzen die RankScan-Insights „Fehlendes semantisches HTMLSemantisches HTML bedeutet, HTML-Elemente nach ihrer inhaltlichen Bedeutung zu verwenden, etwa für den Hauptinhalt oder für Navigation, statt alles aus generischen -Containern zu bauen.Zum Glossareintrag →“ und „Schwaches semantisches HTML“ an:

• „Fehlendes semantisches HTML“: Wichtige semantische HTML5-Elemente fehlen.
• „Schwaches semantisches HTML“: Die Seite nutzt zwar HTML, ist aber stark div-lastig, unklar strukturiert oder semantisch missverständlich.

Wichtig ist die richtige Einordnung:

Semantisches HTML ist kein Ranking-Trick. Es ist sauberes Markup, das Inhalt, Navigation, Hauptbereich und Beiwerk klarer unterscheidbar macht.

Das hilft Nutzern, assistiven Technologien, Entwicklern, Suchmaschinen und Systemen der Künstlichen Intelligenz (KI), Inhalte besser einzuordnen. Es garantiert aber keine besseren Rankings, keine Featured SnippetsEin Featured Snippet ist ein hervorgehobener Antwortauszug, den Google oberhalb der klassischen Treffer anzeigt. Er beantwortet eine Suchanfrage direkt und wird oft als Position Null bezeichnet.Zum Glossareintrag → und keine KI-Zitationen.

Was ist semantisches HTML? #

Semantisches HTML bedeutet: HTML-Elemente werden nach ihrer inhaltlichen Bedeutung verwendet.

Nicht:

<div class="button">Mehr erfahren</div>

sondern:

<a href="/leistungen/">Mehr erfahren</a>

Nicht:

<div class="main-content">
  <div class="post">
    <div class="title">Titel</div>
  </div>
</div>

sondern:

<main>
  <article>
    <h1>Titel</h1>
  </article>
</main>

Google beschreibt semantisches Markup als Markup, das entsprechend seiner Bedeutung und seines Zwecks verwendet wird – zum Beispiel Überschriften für Überschriften, Absätze für Absätze und Listen für Listen.
Quelle: Google Search Central Blog – On web semantics

Das Mozilla Developer Network (MDN), eine Entwickler-Dokumentation, formuliert es ähnlich: Semantisches HTML bedeutet, „das richtige Element für die richtige Aufgabe“ zu verwenden, weil Browser dadurch eingebaute Accessibility-Funktionen bereitstellen können.
Quelle: MDN – HTML: A good basis for accessibility

Was bedeutet „Fehlendes semantisches HTML“? #

Der RankScan-Insight „Fehlendes semantisches HTML“ bedeutet: Auf einer Seite fehlen zentrale semantische HTML-Strukturelemente.

Typische Fälle:

• kein <main> für den Hauptinhalt,
• keine <nav>-Elemente für Hauptnavigation,
• Blogartikel nicht in <article> eingebettet,
• alles besteht aus <div>-Containern,
• keine klaren LandmarksLandmark-Elemente sind semantische HTML-Bereiche wie , , und , die einer Seite klare Orientierungspunkte geben, besonders für Screenreader.Zum Glossareintrag → für Screenreader,
• keine semantischen Listen für Aufzählungen,
• klickbare Elemente sind keine echten Links oder Buttons,
• Tabellen werden für Layout statt Daten verwendet.

Das ist besonders relevant bei:

• Templates,
• Blogartikeln,
• Ratgeberseiten,
• Produktseiten,
• Kategorieseiten,
• Landingpages,
• Navigationskomponenten,
• Headless-Frontends,
• Page-Builder-Websites.

Was bedeutet „Schwaches semantisches HTML“? #

Der Insight „Schwaches semantisches HTML“ bedeutet: Semantische Elemente sind zwar vorhanden, werden aber falsch, inkonsistent oder zu generisch eingesetzt.

Beispiele:

• mehrere sichtbare <main>-Elemente,
• <section> nur als Styling-Container ohne Thema,
• <article> für rein dekorative Cards,
• <button> für normale Links,
• <a> ohne href,
• klickbare <div>-Elemente,
• role-Attribute ersetzen unnötig native HTML-Elemente,
• Headings werden nur für Styling genutzt,
• Landmarken sind doppelt oder unbenannt,
• <aside> enthält eigentlich Hauptinhalt.

Poor Semantic HTML ist oft schwieriger zu erkennen als fehlendes semantisches HTML, weil der Code auf den ersten Blick modern wirkt, aber inhaltlich trotzdem unklar ist.

Die wichtigsten semantischen HTML5-Elemente #

Wichtig: Diese Elemente sind keine Design-Vorgaben. Das Aussehen steuerst du über Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) ist die Sprache, mit der das Layout und die Gestaltung von Webseiten festgelegt werden. CSS bestimmt unter anderem Farben, Schriften, Abstände und Anordnung.Zum Glossareintrag →, die Sprache für das Layout von Webseiten. Die HTML-Elemente beschreiben die Rolle des Inhalts.

Warum semantisches HTML für Accessibility wichtig ist #

Semantisches HTML ist eine Grundlage für Barrierefreiheit.

Screenreader und andere assistive Technologien können Landmarks und native HTML-Strukturen nutzen, um Orientierung zu ermöglichen:

• direkt zum Hauptinhalt springen,
• Navigationen erkennen,
• Listen korrekt vorlesen,
• Buttons und Links richtig bedienen,
• Formulare besser verstehen,
• Tabellen korrekt interpretieren.

MDN betont, dass semantische HTML-Elemente eingebaute Accessibility-Hooks bereitstellen. Deshalb sollten Entwickler native HTML-Elemente nutzen, bevor sie Funktionen mit generischen Elementen und JavaScript (JS) nachbauen.
Quelle: MDN – HTML: A good basis for accessibility

Beispiel:

<button type="button">Menü öffnen</button>

ist von Haus aus tastaturbedienbar und als Button erkennbar.

Ein klickbares <div> dagegen braucht zusätzlichen Code für Rolle, Tastaturbedienung, Fokuszustand und Screenreader-Verständlichkeit. Das ist fehleranfälliger.

Warum semantisches HTML für SEO hilfreich sein kann #

Semantisches HTML hilft Suchmaschinen, Seitenstrukturen besser zu interpretieren. Es zeigt, was Hauptinhalt, Navigation, Abschnitt, Artikel oder ergänzende Information ist.

Trotzdem ist die SEO-Wirkung nicht absolut.

Google schreibt im SEO Starter Guide, dass eine semantische Heading-Reihenfolge für Screenreader sehr gut ist, Google Search aber selten allein auf semantische Bedeutungen aus der HTML-Spezifikation angewiesen ist, weil das Web allgemein nicht immer valides HTML nutzt.
Quelle: Google Search Central – SEO Starter Guide

Die realistische Einordnung:

• Semantisches HTML kann Google beim Verstehen unterstützen.
• Es ersetzt keine hilfreichen Inhalte.
• Es ersetzt keine Indexierbarkeit.
• Es ist kein „magischer Ranking-Booster“.
• Es ist Teil sauberer technischer Website-Qualität.

Für RankScan bedeutet das:

Semantisches HTML ist ein Website-Health-Signal, kein isolierter Rankingfaktor.

Warum semantisches HTML für KI-Sichtbarkeit relevant ist #

KI-Systeme und Suchsysteme müssen Webseiten in sinnvolle Abschnitte zerlegen, verstehen und gewichten. Semantisches HTML kann helfen, Inhalte besser zu segmentieren:

• Hauptinhalt in <main>,
• eigenständiger Artikel in <article>,
• Themenabschnitte in <section>,
• Navigation in <nav>,
• Zusatzinhalte in <aside>,
• Seitenfuss in <footer>.

Das kann die maschinelle Extraktion erleichtern. Aber auch hier gilt:

Semantisches HTML garantiert keine KI-Erwähnung, keine Citation und keine bessere Antwortposition.

Google beschreibt AI OverviewsAI Overviews sind von Google KI-generierte Antwortboxen, die oberhalb der klassischen Suchergebnisse erscheinen. Sie fassen Informationen aus dem Web zusammen und können die Klickverteilung verändern.Zum Glossareintrag → und AI Mode als Suchfunktionen, in denen Inhalte aus dem Web erscheinen können. Website-Betreiber sollen weiterhin hilfreiche, verlässliche Inhalte bereitstellen und technische Zugänglichkeit sicherstellen.
Quelle: Google Search Central – AI features and your website

Für AI ReadinessDer AI Readiness Score ist ein Reifegrad, der zeigt, wie gut eine Website technisch, strukturell, inhaltlich und vertrauensbezogen auf die KI-Suche vorbereitet ist. Er ist ein Bewertungsmodell, kein offizieller Branchenstandard.Zum Glossareintrag → ist semantisches HTML deshalb ein Grundlagenbaustein: Es verbessert Struktur und Verständlichkeit, aber es ersetzt keine FaktendichteFaktendichte beschreibt, wie viele konkrete, überprüfbare Informationen ein Text im Verhältnis zu allgemeinen Aussagen enthält. Sie ist ein redaktionelles Qualitätskriterium, kein offizieller Google-Messwert.Zum Glossareintrag →, QuellenqualitätQuellenqualität zeigt, ob wichtige Aussagen mit verlässlichen Belegen gestützt werden. Sie bedeutet nicht, wahllos Links einzubauen, sondern belastbare Belege für überprüfbare Aussagen zu liefern.Zum Glossareintrag →, Trust-SignaleTrust-Signale sind sichtbare Elemente einer Website, die Vertrauen schaffen, etwa Impressum, Kontakt, Datenschutz, Quellen, Bewertungen, Aktualisierungsdaten und transparente Unternehmensinformationen.Zum Glossareintrag → oder technische Erreichbarkeit.

Vorher/Nachher: Div-Wüste vs. semantisches Markup #

Schwach: Div-Wüste #

<div class="header">
  <div class="logo">Mein Blog</div>
  <div class="menu">
    <div onclick="location.href='/'">Home</div>
    <div onclick="location.href='/blog'">Blog</div>
  </div>
</div>

<div class="main-content">
  <div class="post">
    <div class="title">SEO-Tipps 2026</div>
    <div class="text">Hier steht der Inhalt...</div>
  </div>
</div>

<div class="footer">
  <div class="copy">© 2026 Mein Blog</div>
</div>

Probleme:

• Navigation ist kein echtes <nav>,
• Links sind klickbare <div>-Elemente,
• kein <main>,
• kein <article>,
• Titel ist keine echte Überschrift,
• Footer ist nur ein generischer Container.

Besser: semantisches HTML #

<header>
  <a href="/" class="logo">Mein Blog</a>

  <nav aria-label="Hauptnavigation">
    <a href="/">Home</a>
    <a href="/blog/">Blog</a>
  </nav>
</header>

<main>
  <article>
    <h1>SEO-Tipps 2026</h1>
    <p>Hier steht der Inhalt...</p>
  </article>
</main>

<footer>
  <p>© 2026 Mein Blog</p>
</footer>

Vorteile:

• Hauptinhalt ist klar markiert,
• Navigation ist maschinenlesbar,
• Links sind echte Links,
• Artikel ist als eigenständiger Inhalt erkennbar,
• Überschrift ist semantisch korrekt,
• Footer hat eine klare Rolle.

Die wichtigsten Regeln für semantisches HTML #

1. Bedeutung vor Optik #

Wähle HTML-Elemente nach Bedeutung.

<h2>Preise</h2>

nicht:

<div class="large-bold-title">Preise</div>

CSS steuert Aussehen. HTML steuert Bedeutung.

2. Genau ein sichtbares <main> #

Ein Dokument sollte genau einen sichtbaren Hauptinhalt haben.

Gut:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Schlecht:

<main>Intro</main>
<main>Produkte</main>
<main>FAQ</main>

<main> steht für den zentralen, einzigartigen Inhalt dieser URL.

3. <article> für eigenständige Inhalte nutzen #

Nutze <article>, wenn ein Inhalt auch ausserhalb der Seite sinnvoll wäre.

Geeignet:

• Blogartikel,
• News-Beitrag,
• Produktkarte,
• Forumspost,
• Kommentar,
• Case Study.

Beispiel:

<article>
  <h1>JavaScript-SEO: Rendering-Probleme erkennen</h1>
  <p>...</p>
</article>

4. <section> nur für echte thematische Abschnitte #

Ein <section> sollte einen thematischen Abschnitt markieren und idealerweise eine Überschrift haben.

Gut:

<section>
  <h2>Vorteile von semantischem HTML</h2>
  <p>...</p>
</section>

Schwach:

<section class="spacing-large">
  <div>...</div>
</section>

wenn das Element nur Abstand oder Layout erzeugt.

Für reine Layout-Wrapper ist ein <div> weiterhin korrekt.

5. Echte Links und Buttons verwenden #

Links führen zu einer anderen URL. Buttons lösen eine Aktion aus.

Link:

<a href="/kontakt/">Kontakt aufnehmen</a>

Button:

<button type="button">Menü öffnen</button>

Schlecht:

<div onclick="openMenu()">Menü öffnen</div>

Google empfiehlt für crawlbare Links ein <a>-Element mit href-Attribut.
Quelle: Google Search Central – Links best practices

6. Listen als echte Listen auszeichnen #

Schwach:

<p>- Punkt 1<br>- Punkt 2<br>- Punkt 3</p>

Besser:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ul>

Das ist besser für Accessibility, Lesbarkeit und maschinelle Struktur.

7. Tabellen nur für Daten verwenden #

Tabellen sind für tabellarische Daten, nicht für Layout.

Gut:

<table>
  <thead>
    <tr>
      <th>Metrik</th>
      <th>Guter Wert</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>LCP</td>
      <td>≤ 2,5 s</td>
    </tr>
  </tbody>
</table>

Schlecht: Tabellenlayout für Spalten, Karten oder Navigation.

ARIA vs. semantisches HTML #

ARIA kann helfen, wenn native HTML-Elemente nicht ausreichen. Aber ARIA sollte nicht der erste Schritt sein.

Die W3C-Dokumentation „Using ARIA“ formuliert als erste Regel: Wenn ein natives HTML-Element oder Attribut die benötigte Semantik und das Verhalten bereits hat, soll dieses genutzt werden, statt ein anderes Element mit ARIA umzubauen.
Quelle: W3C – Using ARIA

Einfach gesagt:

Erst natives HTML, dann ARIA.

Gut:

<nav aria-label="Hauptnavigation">
  ...
</nav>

Schwächer:

<div role="navigation" aria-label="Hauptnavigation">
  ...
</div>

Nicht alles braucht ARIA:

<nav role="navigation">

ist meist redundant, weil <nav> diese Rolle bereits implizit hat.

Wichtig ist ARIA besonders bei komplexeren Komponenten wie:

• Tabs,
• Modals,
• Accordions,
• Autocomplete,
• dynamischen Menüs,
• Single-Page-App-Komponenten.

Dabei muss aber auch Tastaturbedienung, Fokusmanagement und Screenreader-Verhalten korrekt umgesetzt werden.

Semantisches HTML und Überschriftenstruktur #

Semantische Container ersetzen keine gute ÜberschriftenstrukturDie Heading-Hierarchie ist die logische Verschachtelung der Überschriften von H1 bis H6, die den Inhalt einer Seite gliedert, ähnlich einem Inhaltsverzeichnis.Zum Glossareintrag →.

Eine gute Seite braucht:

• eine klare H1Die H1 ist die Hauptüberschrift einer Webseite. Sie benennt das zentrale Thema, ist für Nutzer sichtbar und sollte pro Seite in der Regel nur einmal vorkommen.Zum Glossareintrag →,
• logische H2,
• passende H3,
• keine Überschriften nur für Styling,
• keine leeren Heading-Tags,
• keine Sprünge aus reiner Designlogik.

Beispiel:

<main>
  <article>
    <h1>Semantisches HTML</h1>

    <section>
      <h2>Was ist semantisches HTML?</h2>
      <p>...</p>
    </section>

    <section>
      <h2>Warum ist es wichtig?</h2>
      <p>...</p>
    </section>
  </article>
</main>

Der alte HTML5-Outline-Algorithmus, der theoretisch verschachtelte Sectioning-Elemente mit jeweils eigener H1 sinnvoll auswerten sollte, wurde in der Praxis von Browsern nicht zuverlässig umgesetzt. Für heutige Websites ist deshalb eine klare, sichtbare H1-H6-Struktur weiterhin die robustere Lösung.

Semantisches HTML in modernen Frontends #

Semantisches HTML ist auch in React, Vue, Angular, Svelte, Astro oder Headless-Setups wichtig.

Häufige Probleme:

• Komponenten geben immer <div> zurück,
• Cards sind klickbare <div> statt Links,
• Buttons werden als Links genutzt,
• Navigation wird clientseitig ohne echte <a href> gebaut,
• Headings werden durch Designkomponenten ersetzt,
• modale Dialoge haben keine korrekte Semantik,
• Server-Side RenderingBeim Server-Side Rendering (SSR) erzeugt der Server das fertige HTML, bevor die Seite an Browser oder Crawler ausgeliefert wird. Inhalte sind dadurch sofort im Quelltext vorhanden.Zum Glossareintrag → (SSR), das serverseitige RendernJavaScript-Rendering bezeichnet den Vorgang, bei dem ein Browser oder Crawler JavaScript-Code ausführt, um daraus die fertige, sichtbare Seite zu erzeugen. Erst nach diesem Schritt entstehen Inhalte, die nicht bereits im ausgelieferten HTML stehen.Zum Glossareintrag →, bzw. Static Site Generation (SSG), die statische Seitengenerierung, fehlt und wichtige Struktur entsteht erst im Browser.

Beispiel in React:

Schwach:

<div className="card" onClick={() => navigate('/produkt')}>
  <div className="title">Produkt</div>
</div>

Besser:

<article className="card">
  <h2>
    <a href="/produkt">Produkt</a>
  </h2>
</article>

Das ist zugänglicher, crawlbarer und semantisch klarer.

Prüfen: Wie erkennst du semantische HTML-Probleme? #

1. Quelltext prüfen #

Suche im Seitenquelltext nach:

• <main>,
• <nav>,
• <article>,
• <section>,
• <aside>,
• <header>,
• <footer>,
• echten <a href>-Links,
• echten <button>-Elementen,
• echten Listen und Tabellen.

Wenn du fast nur verschachtelte <div>-Elemente findest, ist das ein Warnsignal.

2. DevTools und Accessibility Tree nutzen #

In Browser DevTools kannst du den Accessibility Tree prüfen.

Achte auf:

• Landmarks,
• Name der Navigation,
• Hauptbereich,
• Buttons,
• Links,
• Überschriften,
• Formulare,
• Tastaturfokus.

3. Lighthouse Accessibility prüfen #

LighthouseLighthouse ist ein quelloffenes Diagnosewerkzeug von Google, das Performance, Barrierefreiheit und weitere Qualitätsaspekte einer Seite in einer simulierten Laborumgebung prüft.Zum Glossareintrag → erkennt viele Accessibility-Probleme, zum Beispiel:

• fehlende Namen für Buttons,
• Links ohne Namen,
• ungültige ARIA-Attribute,
• fehlende Labels,
• schlechte Landmark-Struktur,
• Probleme bei Überschriften.

Lighthouse ersetzt kein manuelles Accessibility-Audit, ist aber ein guter Startpunkt.

4. Tastaturtest durchführen #

Nutze nur die Tastatur:

• Tab,
• Shift + Tab,
• Enter,
• Space,
• Escape,
• Pfeiltasten bei Menüs oder Tabs.

Wenn Navigation, Buttons, Modals oder Menüs nicht sauber funktionieren, ist oft nicht nur Accessibility, sondern auch Semantik betroffen.

5. Screenreader- oder Landmark-Test #

Prüfe mit Screenreader oder Browser-Erweiterungen:

• gibt es eine Hauptnavigation?
• gibt es einen Hauptbereich?
• sind Headings sinnvoll?
• sind Buttons als Buttons erkennbar?
• sind Links als Links erkennbar?

Priorisierung: Welche semantischen Probleme sind wichtig? #

Die wichtigste Regel:

Priorisiere Templates und Komponenten, die viele wichtige Seiten betreffen.

Was tun nach einem RankScan-Fund? #

Wenn RankScan „Fehlendes semantisches HTML“ oder „Schwaches semantisches HTML“ meldet, solltest du strukturiert vorgehen.

Schritt 1: Betroffene Templates identifizieren #

Prüfe:

• Startseite,
• Blogartikel,
• Produktseiten,
• Kategorieseiten,
• Leistungsseiten,
• Landingpages,
• Navigation,
• Footer,
• Cards,
• FAQ-Komponenten (Frequently Asked Questions, FAQ, also häufig gestellte Fragen),
• Modals,
• Filter.

Oft ist nicht eine einzelne Seite das Problem, sondern ein wiederverwendetes Template.

Schritt 2: Hauptstruktur korrigieren #

Zuerst die Basis:

<header>...</header>
<main>...</main>
<footer>...</footer>

Danach:

• <nav> für Navigation,
• <article> für eigenständige Inhalte,
• <section> für thematische Abschnitte,
• <aside> für Zusatzinhalte.

Schritt 3: Interaktive Elemente korrigieren #

Prüfe:

• Links sind <a href>,
• Aktionen sind <button>,
• Formulare nutzen <label>,
• modale Dialoge haben Fokusmanagement,
• Menüs sind tastaturbedienbar.

Schritt 4: Überschriftenstruktur prüfen #

Prüfe:

• eine klare H1,
• logische H2/H3,
• keine Überschriften nur für CSS,
• keine leeren Headings,
• keine versteckten Headings ohne Zweck.

Schritt 5: Accessibility testen #

Nutze:

• Lighthouse,
• DevTools Accessibility Tree,
• Tastaturtest,
• Screenreader-Stichprobe,
• HTML Validator,
• RankScan Re-Crawl.

Worauf ein guter HTML-Semantik-Check achtet #

Ein guter Semantik-Check sollte mehr leisten als nur <main> zu suchen.

Ein guter Check prüft:

• gibt es ein sichtbares <main>?
• gibt es mehr als ein sichtbares <main>?
• gibt es <nav> für Hauptnavigation?
• sind Navigationselemente echte Links?
• enthält der Hauptinhalt eine H1?
• sind Artikel sinnvoll mit <article> ausgezeichnet?
• werden Abschnitte sinnvoll mit <section> strukturiert?
• gibt es klickbare <div> oder <span>?
• gibt es Buttons ohne <button>?
• gibt es Links ohne href?
• sind Listen echte Listen?
• werden Tabellen korrekt genutzt?
• sind ARIA-Rollen redundant oder widersprüchlich?
• sind Landmarks eindeutig benannt?
• betrifft das Problem ein Template oder nur eine einzelne Seite?
• ist der Hauptinhalt im initialen HTML vorhanden?

So werden „Fehlendes semantisches HTML“ und „Schwaches semantisches HTML“ zu konkreten Website-Health-Aufgaben.

Beispiel: Page-Builder erzeugt Div-Wüste #

Ausgangslage #

Eine B2B-Website wurde mit einem Page Builder erstellt. Optisch ist sie modern. Im Code besteht fast alles aus verschachtelten <div>-Containern.

RankScan meldet:

„Fehlendes semantisches HTML“
„Schwaches semantisches HTML“
„Fehlende H1“
„Nur per JavaScript sichtbarer Inhalt“

Analyse #

• kein <main>,
• keine echte H1 im initialen HTML,
• Navigation teilweise als klickbare Divs,
• Karten sind keine Links,
• FAQ ist nur visuell eine Liste,
• Blogartikel sind nicht als <article> ausgezeichnet.

Lösung #

1. Basis-Template auf <header>, <main>, <footer> umbauen.
2. Hauptnavigation als <nav> mit echten <a href>-Links ausgeben.
3. Blogartikel in <article> setzen.
4. Inhaltsabschnitte mit H2 und <section> strukturieren.
5. Cards als echte Links oder Artikel mit Link ausgeben.
6. FAQ als echte Liste oder Frage-Antwort-Struktur ausgeben.
7. Klickbare Divs durch <a> oder <button> ersetzen.
8. Accessibility Tree und RankScan erneut prüfen.

Ergebnis #

Die Seite sieht gleich aus, ist aber technisch verständlicher, zugänglicher und robuster für Crawler. Rankings oder KI-Zitationen sind dadurch nicht garantiert, aber die strukturelle Grundlage ist deutlich besser.

Häufige Fehler bei semantischem HTML #

Fehler 1: Divs vollständig verbieten #

<div> ist nicht schlecht. Es ist korrekt, wenn du einen neutralen Layout-Container brauchst und kein semantisches Element passt.

Fehler 2: Semantik für Styling nutzen #

Ein <section> ist kein Abstandshalter. Nutze es für thematische Abschnitte.

Fehler 3: Buttons und Links verwechseln #

Link = Navigation zu URL. Button = Aktion auf der Seite.

Fehler 4: ARIA statt HTML verwenden #

ARIA kann ergänzen, aber native Elemente sind meist robuster.

Fehler 5: Headings als Design-Elemente verwenden #

Eine Überschrift ist eine Strukturinformation, nicht nur eine Schriftgrösse.

Fehler 6: Mehrere Hauptbereiche erzeugen #

Eine Seite sollte genau einen sichtbaren Hauptinhalt haben.

Fehler 7: Semantik nur auf Desktop prüfen #

Mobile Menüs, Accordions und Offcanvas-Navigationen sind oft die eigentlichen Problemstellen.

Checkliste: Semantisches HTML prüfen #

Nutze diese Checkliste:

• Gibt es genau ein sichtbares <main>?
• Gibt es ein <header> und <footer>?
• Ist die Hauptnavigation als <nav> ausgezeichnet?
• Sind Navigationslinks echte <a href>-Links?
• Ist der Hauptinhalt klar im <main>?
• Gibt es eine klare H1?
• Sind Blogartikel oder News als <article> ausgezeichnet?
• Werden thematische Abschnitte sinnvoll mit <section> und Überschrift strukturiert?
• Sind Zusatzinhalte in <aside>?
• Sind Listen echte <ul> oder <ol>?
• Sind Buttons echte <button>?
• Sind Tabellen nur für Daten im Einsatz?
• Gibt es klickbare <div>-Elemente?
• Sind ARIA-Rollen nötig oder redundant?
• Funktioniert die Seite mit Tastatur?
• Ist der Accessibility Tree verständlich?
• Wurde nach Änderungen erneut gecrawlt?

Ergänzend dazu helfen Schema Markup und Zusammenfassungen und Key Takeaways, um die Ursache sauber einzugrenzen und die nächsten SEO-Massnahmen zu priorisieren.

Fazit: Semantisches HTML macht Inhalte verständlicher #

Semantisches HTML ist die unsichtbare Struktur einer Website. Es trennt Hauptinhalt von Navigation, Zusatzinformationen und Footer. Es macht Inhalte für Browser, Screenreader, Suchmaschinen, Entwickler und Crawler leichter verständlich.

Die RankScan-Insights „Fehlendes semantisches HTML“ und „Schwaches semantisches HTML“ zeigen, wo diese Struktur fehlt oder nicht sauber umgesetzt ist.

Die beste Vorgehensweise lautet:

1. betroffene Templates identifizieren,
2. Basisstruktur mit <header>, <main> und <footer> schaffen,
3. Navigation mit <nav> und echten Links ausgeben,
4. eigenständige Inhalte mit <article> strukturieren,
5. thematische Abschnitte mit <section> und Headings gliedern,
6. interaktive Elemente als <a> oder <button> korrekt umsetzen,
7. ARIA nur ergänzend nutzen,
8. Accessibility Tree und Tastaturbedienung prüfen,
9. RankScan erneut crawlen.

So wird aus einer Div-Wüste eine klare Informationsarchitektur: zugänglicher für Menschen, verständlicher für Maschinen und stabiler als technisches Fundament für SEO, Website Health und AI Readiness.

Quellen und weiterführende Informationen #

• Google Search Central Blog – On web semantics
• Google Search Central – SEO Starter Guide
• Google Search Central – Links best practices
• Google Search Central – AI features and your website
• MDN – HTML elements reference
• MDN – HTML: A good basis for accessibility
• WHATWG HTML Standard – Sections
• W3C – Using ARIA
• W3C – ARIA in HTML