Der W3C Markup Validator
Finden und beheben Sie HTML-Fehler mit dem W3C Markup Validation Service
Der W3C Markup Validator ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was der Validator prüft
Der W3C Markup Validator (validator.w3.org) analysiert HTML anhand der offiziellen Spezifikation und meldet jeden Verstoß gegen die Spezifikation: nicht geschlossene Tags, ungültige Verschachtelungen (ein <p> innerhalb eines anderen <p>), fehlende erforderliche Attribute (img ohne alt), nicht erkannte Elemente und vieles mehr.
Warum Validierung wichtig ist
Ungültiges HTML wird möglicherweise heute in jedem Browser korrekt dargestellt, aber jeder Browser kann Fehler anders korrigieren – was in Chrome richtig aussieht, kann in Firefox fehlerhaft sein. Valides HTML sorgt für eine vorhersehbare, konsistente Darstellung und vermeidet überraschendes Verhalten in Screenreadern, Suchcrawlern und E-Mail-Clients.
Drei Möglichkeiten zum Übermitteln
Validieren Sie per URL (Seiten-URL einfügen), per Datei-Upload oder durch direkte Eingabe (HTML einfügen). Eine URL eignet sich am besten für produktive Seiten; die direkte Eingabe ist während der Entwicklung nützlich, wenn die Datei noch nicht öffentlich verfügbar ist.
Ergebnisse lesen
Fehler enthalten eine Zeilennummer, einen Ausschnitt des fehlerhaften Markups und eine Erklärung. Beheben Sie die Fehler von oben nach unten – viele Fehler sind Folgefehler eines früheren Fehlers. Führen Sie die Validierung nach der Behebung der ersten Fehler erneut aus, um zu sehen, wie viele Warnungen tatsächlich berechtigt sind.
Warnungen und Fehler
Fehler sind Verstöße gegen die Spezifikation, die das Rendering beeinträchtigen können. Warnungen weisen auf verdächtige Muster hin, die zwar technisch gültig, aber wahrscheinlich unbeabsichtigt sind (etwa typoverdächtige Attributnamen oder Hinweise zur Barrierefreiheit). Fehler müssen behoben werden; Warnungen sollten untersucht werden.
Häufige Fehler
Fehlendes alt-Attribut bei img. Nicht geschlossenes selbstschließendes Tag (<br> statt des ebenfalls gültigen Legacy-Tags <br/>). Doppelte id auf der Seite. Formular-Label ohne ein for-Attribut, das mit einer input-id übereinstimmt. Verschachtelte interaktive Elemente (ein button innerhalb eines a). Diese fünf Ursachen machen den Großteil der Validatorausgaben aus.
Templates validieren
Wenn Ihr HTML durch Templates erzeugt wird, validieren Sie die endgültige Ausgabe (die gerenderte Seite) und nicht den Quelltext des Templates. Ein {{ }}-Platzhalter ist kein gültiges HTML – entscheidend ist nur, was die Engine erzeugt. Führen Sie den Validator in der CI anhand gerenderter Seiten aus einem Test-Build aus.
html-validate CLI
Verwenden Sie für die CI-Integration das npm-Paket html-validate: npx html-validate "public/**/*.html" validiert jede Seite in einem Build. Konfigurieren Sie die Regeln in .htmlvalidate.json. Damit können Sie Builds bei Validierungsregressionen fehlschlagen lassen.
Stylelint und Linting im Quellcode
Linting beim Schreiben (stylelint für CSS, eslint-plugin-jsx-a11y für React) erkennt viele Probleme, bevor sie den Validator erreichen. Kombinieren Sie dies mit einer End-to-End-Validierung in der CI als mehrschichtige Absicherung – erkennen Sie die meisten Probleme früh und den Rest vor dem Deployment.
Was die Validierung NICHT erkennt
Die Validierung prüft die Korrektheit des Markups, nicht seine Semantik. Eine Seite, auf der jede Überschrift ein <h6> ist, enthält gültiges HTML, hat aber eine schlechte Semantik. Barrierefreiheitsprüfungen mit Lighthouse und eine manuelle Überprüfung erkennen semantische Probleme, die der Validator nicht erkennt.
Warnung zum Quirks Mode
Ein fehlendes <!doctype html> aktiviert den Quirks Mode – Browser verwenden dann eine veraltete Kompatibilitätsschicht, die modernes CSS beeinträchtigt. Der Validator meldet den fehlenden Doctype als ersten Fehler. Veröffentlichen Sie niemals eine Seite ohne die Doctype-Deklaration.
Kontinuierliche Validierung
Führen Sie die Validierung über GitHub Actions bei jedem PR aus: Installieren Sie html-validate, führen Sie es für die erstellte Website aus und lassen Sie den PR fehlschlagen, wenn Fehler vorhanden sind. Neue Fehler werden so bereits während des Reviews erkannt, statt sich über Monate anzusammeln und später überwältigend aufwendig zu werden.
Wissenscheck
Warum ist eine fehlende <!doctype html>-Deklaration für den W3C-Validator so wichtig?
Zusammenfassung
Der W3C Markup Validator analysiert HTML anhand der Spezifikation und meldet ungültiges Markup. Verwenden Sie ihn für einmalige Prüfungen über die Weboberfläche und das html-validate CLI in der CI für eine kontinuierliche Abdeckung. Häufige Probleme sind fehlendes alt, doppelte ids, ein fehlender Doctype und verschachtelte interaktive Elemente. Die Validierung erkennt Markup-Fehler. Ergänzen Sie sie durch Lighthouse und eine manuelle Überprüfung, um semantische Qualität und Barrierefreiheit zu gewährleisten.
Häufig gestellte Fragen
Ist die Lektion „Der W3C Markup Validator“ kostenlos?
Ja — der vollständige Text von „Der W3C Markup Validator“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Der W3C Markup Validator“?
Finden und beheben Sie HTML-Fehler mit dem W3C Markup Validation Service Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Der W3C Markup Validator“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Der W3C Markup Validator
- Lighthouse-HTML-Audit
- Pa11y und axe für Barrierefreiheitstests
- HTML-Snapshot-Tests