Sie haben ein Projekt eingereicht, im Browser geöffnet, und das Layout ist zerfallen. Sie haben es auf einem Tablet geprüft, und das Menü war verzerrt. Der Kunde schreibt: „Bei mir in Safari ist alles grau." Kommt Ihnen das bekannt vor?

Die Ursache des Problems ist ungültiger Code. Ein nicht geschlossenes Tag, ein fehlendes Semikolon im CSS oder ein Syntaxfehler in JavaScript, und der Browser „rät" für Sie. Jeder Browser rät anders. Das Ergebnis ist Chaos.

Zum Glück ist die Prüfung der Code-Gültigkeit im Jahr 2026 einfacher denn je. Online-Dienste, Browser-Erweiterungen und die integrierten DevTools finden Fehler in Sekunden, nicht in einem ganzen Abend Fehlersuche. Nachfolgend die funktionierenden Werkzeuge, die wir in der Praxis einsetzen.

💡 Kurzüberblick:

• Öffnen Sie validator.w3.org und prüfen Sie das HTML Ihrer Seite: das dauert 10 Sekunden
• Für CSS nutzen Sie jigsaw.w3.org/css-validator: er zeigt Warnungen zur Inkompatibilität mit bestimmten Browsern
• Prüfen Sie JavaScript mit ESLint oder über die integrierte Browser-Konsole: Syntaxfehler werden sofort hervorgehoben
• Installieren Sie die Erweiterung Web Developer für Chrome: sie bietet Ein-Klick-Zugriff auf die W3C-Validatoren
• Für die Stapelprüfung dutzender Seiten nutzen Sie Total Validator: er prüft HTML, CSS, Links und Rechtschreibung in einem Durchlauf

Vergleichstabelle

1. W3C-Online-Validatoren

Validator.w3.org

Der W3C Markup Validation Service ist der offizielle Validator des Konsortiums, das die Webstandards entwickelt. Seit 2025 läuft er auf der Nu Html Checker-Engine, die moderner und genauer ist als der alte SGML-Parser.

Sie können eine Seite auf drei Arten prüfen: per URL, durch Hochladen einer HTML-Datei oder durch direktes Einfügen von Code. Der Bericht zeigt Fehler mit Zeilennummern und konkreten Korrekturempfehlungen. Beachten Sie, dass der Validator die Konformität mit dem Standard prüft, nicht „ob die Seite funktioniert". Ein grünes W3C-Abzeichen garantiert nicht, dass die Seite in allen Browsern gleich aussieht.

In der Praxis führen wir bei jedem Redesign eine Prüfung über validator.w3.org durch. Sie fängt nicht geschlossene Tags und nicht standardkonforme Attribute ab, die der visuellen Prüfung entgehen.

Jigsaw.w3.org

Der W3C CSS Validation Service prüft Stylesheets auf Konformität mit der Spezifikation. Sie können das CSS-Profil (2.1, 3, SVG) festlegen, das Anzeigemedium wählen und die Detailebene des Berichts einstellen. Anders als beim HTML-Validator sind Warnungen hier genauso wichtig wie Fehler, denn sie weisen oft auf Eigenschaften hin, die nicht in allen Browsern funktionieren.

Ein nützliches Feature ist, dass der Validator anzeigt, welche Herstellerpräfixe (-webkit-, -moz-) nicht mehr benötigt werden. Im Jahr 2026 werden die meisten CSS3-Eigenschaften ohne Präfixe unterstützt, und jigsaw hilft, veralteten Code zu bereinigen.

2. Spezialisierte Online-Werkzeuge

Validome.org

Validome ist ein weniger bekannter, aber solider Validator mit Unterstützung für mehrere Standards: HTML (einschließlich XHTML und HTML5), CSS, RSS/Atom-Feeds und sogar Mikrodaten. Er arbeitet schnell, und die Oberfläche ist minimalistisch. Das ist praktisch, wenn Sie eine Gegenprüfung benötigen: Lassen Sie eine Seite durch das W3C laufen, dann durch Validome, und vergleichen Sie die Ergebnisse. Unterschiedliche Parser fangen manchmal unterschiedliche Probleme.

Varvy.com

Varvy zeigt eine Zusammenfassung der Seite: wie viele Skripte und Styles eingebunden sind, deren Größe und Ladereihenfolge. Das ist weniger ein Validator als ein Diagnosewerkzeug für Performance-Audits. Es ist nützlich, wenn eine Seite langsam ist: Varvy zeigt sofort, welche Ressource das Rendering blockiert.

3. Browser-Erweiterungen für Firefox

HTML Validator

Diese auf Tidy und OpenSP basierende Erweiterung zeigt ein einfaches Symbol in der Symbolleiste: Grün bedeutet, die Seite ist gültig, Rot bedeutet, es gibt Fehler. Ein Klick öffnet einen detaillierten Bericht mit hervorgehobenen Problemzeilen und Korrekturvorschlägen. Ideal für alle, die den Validierungsstatus jeder besuchten Seite ohne zusätzlichen Aufwand sehen möchten.

Total Validator

Total Validator ist der Mähdrescher unter den Validatoren. In einem Durchlauf prüft er: HTML gegen mehrere Standardversionen, CSS, fehlerhafte Links, Barrierefreiheit und Rechtschreibung. Er verfügt über eine Screenshot-Funktion, mit der Sie Seiten in verschiedenen Browsern erfassen können, was für den schnellen visuellen Vergleich praktisch ist.

In der Praxis ist Total Validator bei der Website-Abnahme unverzichtbar: Sie lassen einen Check über die gesamte Domain laufen und erhalten einen einzigen Bericht über alle problematischen Seiten.

• Vorteile: alles in einem Werkzeug, Screenshots, Linkprüfung, regelmäßig aktualisiert
• Nachteile: die Oberfläche wirkt veraltet, die Prüfung einer großen Website dauert Minuten
• Preis: kostenlos

Validaty

Eine schlanke Erweiterung, die der Firefox-Symbolleiste eine Schaltfläche hinzufügt. Ein Klick, und Sie sehen eine farbliche Anzeige der Gültigkeit der aktuellen Seite. Minimalistisch: keine detaillierten Berichte, nur „bestanden / nicht bestanden". Für schnelle Prüfungen während der Arbeit ist sie perfekt.

4. Chrome-Erweiterungen

Web Developer

Die Erweiterung Web Developer ist das Schweizer Taschenmesser für Webentwickler. Neben der Validierung (HTML via URL und direktem Code-Einfügen, CSS, Feeds, Barrierefreiheit) kann sie: JavaScript deaktivieren, Cookies verwalten, CSS live bearbeiten, Bild-Alt-Texte anzeigen und auf fehlerhafte Links prüfen.

Die Validierung ist hier nicht die Hauptfunktion, sondern Teil des gesamten Werkzeugkastens. Angenehm ist, dass alle Werkzeuge in einem Panel versammelt sind, sodass Sie nicht zwischen Tabs hin- und herspringen müssen.

• Vorteile: umfangreicher Werkzeugsatz, Integration mit W3C-Validatoren, aktive Community
• Nachteile: verwendet einen externen Validator (keine eigene Engine), keine Anpassung an eine eigene Instanz möglich
• Preis: kostenlos

Validity

Die Erweiterung Validity gibt HTML-Prüfergebnisse direkt in der JavaScript-Konsole aus, sodass Sie keinen neuen Tab öffnen müssen. Sie können sie so konfigurieren, dass sie Ihre eigene Validator-Instanz nutzt, und die automatische Prüfung auf bestimmten Hosts aktivieren.

• Vorteile: Anpassbarkeit, automatische Prüfung auf ausgewählten Seiten
• Nachteile: die Ausgabe vermischt sich mit JS-Logs, was das Lesen umständlich macht; zeigt nur die Fehlerzeile ohne Code-Ausschnitt
• Preis: kostenlos

HTML Validation Bookmarklet

Acid.JS Validator ist ein Bookmarklet, das die W3C-SGML-API zur Markup-Prüfung nutzt. Es erfordert keine Erweiterungsinstallation: Ziehen Sie den Link einfach in Ihre Lesezeichenleiste und starten Sie ihn auf jeder Seite mit einem Klick. Es funktioniert in jedem Browser. Eine gute Rückfalloption, wenn Erweiterungen durch Unternehmensrichtlinien blockiert werden.

5. Integrierte Entwicklerwerkzeuge

Firebug ging bereits 2017 in die Geschichte ein, aber sein Erbe lebt in jedem modernen Browser weiter. Firefox, Chrome und Edge verfügen alle über integrierte DevTools (F12), die direkt aus Firebug hervorgegangen sind.

Was DevTools für die Validierung leisten können:

• Der Tab „Konsole" zeigt JavaScript-Fehler mit Zeilennummern und Stack-Traces. Syntaxfehler werden beim Laden der Seite sofort rot hervorgehoben.
• Der Tab „Elemente" zeigt ungültiges HTML visuell an: Tags, die der Browser automatisch „repariert" hat, werden anders dargestellt als im Quelltext.
• Der Tab „Probleme" (Chrome) bzw. das Panel „Konsole" (Firefox) zeigt Warnungen zu veralteten APIs, gemischten Inhalten (HTTP/HTTPS) und CSP-Problemen.

Der Hauptvorteil der DevTools ist die Unmittelbarkeit. Sie sind bereits im Browser, Sie betrachten bereits die Seite, drücken Sie einfach F12. Keine Installation erforderlich.

6. JavaScript-Validatoren

Für die professionelle Arbeit mit JavaScript reicht ein Online-Validator nicht aus. In der Praxis setzen wir auf zwei Prüfebenen:

Erstens, ESLint. Ein statischer Analysator, der nicht nur Syntaxfehler findet, sondern auch potenzielle Probleme: ungenutzte Variablen, unsichere Konstrukte und Abweichungen vom Code-Stil. Er integriert sich mit VS Code, WebStorm und CI/CD-Pipelines. Die eslint:recommended-Konfiguration deckt die meisten Anforderungen eines typischen Projekts ab.

Zweitens, TypeScript. Strikte Typisierung fängt ganze Fehlerklassen bereits beim Schreiben des Codes ab. Wenn das Projekt in reinem JS vorliegt, ergänzen Sie zumindest JSDoc-Annotationen: TypeScript prüft .js-Dateien mit Annotationen, ohne dass Sie auf .ts umsteigen müssen.

Online-Validatoren (javascript-validator.com und ähnliche) eignen sich für die schnelle Prüfung eines kleinen Snippets, nicht jedoch für die systematische Arbeit mit Code.

7. Prüfung der Responsivität

QuirkTools zeigt, wie eine Website bei verschiedenen Bildschirmauflösungen aussieht, vom Smartphone bis zum breiten Monitor. Das ist nützlich für schnelle Prüfungen des responsiven Layouts, ohne physisch durch Geräte wechseln zu müssen.

Im Jahr 2026 dienen die eingebauten DevTools als Alternative: Chrome und Firefox verfügen über einen Geräteemulationsmodus (Device Toolbar), der mobile Auflösungen genauer darstellt. QuirkTools ist jedoch praktisch für die Präsentation vor Kunden: Ein Screenshot mit allen Breakpoints zeigt das Ergebnis klar und deutlich.

Video: So prüfen Sie die HTML-Validität in 5 Minuten

Wenn Sie noch nie einen W3C-Validator verwendet haben, beginnen Sie mit diesem kurzen Tutorial. Der Autor demonstriert alle drei Prüfwege: per URL, per Datei-Upload und durch direktes Einfügen des Codes.

⁉️🤔 Häufig gestellte Fragen

Warum sollte man sich 2026 noch um HTML-Validität kümmern, wenn Browser doch alles korrigieren?

Browser korrigieren Fehler unterschiedlich. Chrome schließt ein nicht geschlossenes Tag auf die eine Weise, Safari auf eine andere. Das Ergebnis: Die Seite sieht unterschiedlich aus. Zudem beeinträchtigt ungültiges HTML die Suchmaschinenoptimierung, da Such-Bots weniger tolerant gegenüber Markup-Fehlern sind als Browser. Die W3C-Validierung ist eine Absicherung gegen browserübergreifende Fehler und Indexierungsprobleme.

Was ist wichtiger zu prüfen: HTML oder CSS?

HTML ist wichtiger. Ein HTML-Fehler zerstört die Dokumentstruktur, wodurch Screenreader und Suchmaschinen Inhalte verlieren. Ein CSS-Fehler betrifft in der Regel nur die visuelle Darstellung eines bestimmten Elements. In der Praxis: Validieren Sie zuerst HTML (validator.w3.org), dann CSS (jigsaw.w3.org), dann JS (ESLint oder Konsole).

Kann die Validierung im Entwicklungsprozess automatisiert werden?

Ja, und das ist der beste Ansatz. ESLint für JS, Stylelint für CSS und html-validate für HTML lassen sich in Pre-Commit-Hooks integrieren (Husky + lint-staged). Beim Push ins Repository wird der Code automatisch geprüft, und Fehler gelangen nicht in die Produktion. Für WordPress-Projekte ergänzen Sie die Prüfung in der CI per GitHub Actions: Lassen Sie alle Theme-Templates bei jedem PR durch den Validator laufen.

Validator.w3.org zeigt Dutzende Fehler auf einer funktionierenden Website. Ist das eine Katastrophe?

Nicht unbedingt. Einige „Fehler" des W3C-Validators sind nicht standardkonforme Attribute, die von Plugins oder Frameworks hinzugefügt werden. Zum Beispiel Alpine.js-Attribute (x-data, x-show) oder Analytics-Datenattribute. Betrachten Sie Fehler selektiv: Nicht geschlossene Tags, falsche Verschachtelung und doppelte IDs sind echte Bugs. Nicht standardkonforme Datenattribute sind akzeptables Rauschen.

Welchen Validator sollte ich für eine WordPress-Website wählen?

Beginnen Sie mit validator.w3.org für einmalige Prüfungen der wichtigsten Seiten. Installieren Sie Total Validator als Firefox-Erweiterung für regelmäßige Audits. Ergänzen Sie ESLint und Stylelint in Ihrem Theme-Entwicklungsprozess. Für defekte Links nutzen Sie das integrierte Audit in Total Validator oder den spezialisierten Dr. Link Check.

Zusammenfassung: Was Sie wann ausführen sollten

Code-Validierung ist keine einmalige Aktion vor der Projektabgabe, sondern eine Gewohnheit. Hier ist unsere praktische Checkliste:

• Beim Erstellen eines neuen Blocks: Führen Sie HTML durch validator.w3.org (direktes Einfügen des Codes), CSS durch jigsaw.w3.org.
• Bei der Installation eines neuen Plugins auf WordPress: Öffnen Sie die Seite mit dem Plugin im Browser, drücken Sie F12 → Konsole, prüfen Sie auf rote JS-Fehler.
• Quartalsweise: Führen Sie Total Validator auf der gesamten Website aus, prüfen Sie auf defekte Links und das Gesamtbild.
• Vor dem Release: DevTools → Device Toolbar → gehen Sie alle Breakpoints durch und suchen Sie nach visuellen Fehlern.

Sie müssen nicht jeden Tag jede Seite prüfen. Es genügt, die Validierung an den kritischen Punkten des Workflows zu integrieren, und die Anzahl „unerwarteter" Fehler in der Produktion wird drastisch sinken.

Wenn Sie gerade erst anfangen, installieren Sie die Erweiterung HTML Validator für Firefox oder Web Developer für Chrome. Das Symbol in der Toolbar erinnert Sie jedes Mal an die Prüfung, wenn Sie die Website öffnen. Das ist der einfachste Weg, Validierung zur Gewohnheit zu machen.