Semantic HTML Checker

Warum semantisches HTML wichtig ist

Semantic HTML gibt einer Seite eine Landkarte. Ein <main>-Tag markiert, wo der eigentliche Content liegt, ein <nav> die Navigation, und ein <footer> trennt Standardtext von Substanz. Screenreader nutzen diese Karte direkt. Für Google ist das Signal schwächer, als viele SEO-Ratgeber behaupten: Googles Doku führt Landmark-Elemente nicht als Rankingfaktor. Bau sie also für deine Nutzer und nimm einen SEO-Effekt als Bonus mit.

Dieser Semantic-HTML-Checker prüft jede Seite auf native Landmark-Elemente, die Überschriften-Struktur und typische Barrierefreiheits-Probleme. Er sucht nach den HTML-Elementen selbst. Eine Seite, die ihre Bereiche nur mit ARIA-Rollen wie role="main" auszeichnet, taucht deshalb als fehlend auf. Ein Befund, der ein WCAG-2.2-Kriterium verletzt, nennt es, verlinkt die W3C-Erklärung und zeigt, wo möglich, das konkrete Element auf deiner Seite samt fertigem Fix. Befunde, die keine Konformitätsverstöße sind, etwa ein fehlender <header> oder eine übersprungene Überschriften-Ebene, laufen stattdessen als Best Practice. Denn ein Tool, das überall "WCAG" draufschreibt, bringt dir bei, das Etikett zu ignorieren.

HTML Landmarks und Accessibility

Für Screenreader-Nutzer sind Landmarks der schnellste Weg, eine Seite zu navigieren. In NVDA springst du mit der Taste D von Landmark zu Landmark, in JAWS mit R. Fehlen Landmarks, weichen Nutzer auf Überschriften aus oder lesen die Seite von oben nach unten, und das dauert. Landmarks sind ein dokumentierter Weg, die WCAG-Erfolgskriterien 1.3.1 und 2.4.1 zu erfüllen, aber nicht der einzige. Ein fehlendes <main> allein ist also noch kein Konformitätsverstoß. Das spielt eine Rolle, seit der European Accessibility Act am 28. Juni 2025 für E-Commerce, Banking und weitere gelistete Dienste in der EU gilt. Die zugehörige Norm baut auf WCAG 2.1 AA auf.

HTML Landmarks vs. ARIA Landmark Rollen

Beide existieren, beide tun den gleichen Job, aber nutze natives HTML, wann immer möglich. Ein <nav>-Element bekommt die Navigation-Rolle automatisch, genau wie <div role="navigation">, nur mit weniger Markup und weniger Fehlerquellen. Das ist die erste ARIA-Regel aus den W3C-Leitlinien: nutze ARIA-Rollen nur, wenn du kein natives Element verwenden kannst, das die Rolle bereits eingebaut hat. Das deckt fast jeden Fall ab.

Häufige HTML-Landmark-Fehler

Die üblichen Stolperfallen. Mehrere <main>-Elemente auf einer Seite (die HTML-Spec erlaubt nur ein sichtbares <main>). Ein <nav> um jedes Menü, inklusive Footer-Links, was die semantische Bedeutung verwässert. Alles in <div>-Tags verpacken. Komplett fehlendes <main>.

Weitere Tools entdecken

FAQ