HTML validieren: Lass deinen Code prüfen
Browser sind unglaublich gutmütig. Vergessene schließende Tags, falsch verschachtelte Elemente, doppelte IDs: der Browser versucht trotzdem irgendwas anzuzeigen und meistens sieht es sogar okay aus. Das Problem: "meistens okay" heißt auch "manchmal kaputt", und zwar gern in genau dem Browser den du nicht getestet hast. Deshalb gibt es Validatoren, Prüfprogramme die deinen Code gegen die HTML-Regeln halten.
So funktioniert der Check
Das Standardwerkzeug ist der kostenlose Validator des W3C unter validator.w3.org. Du hast drei Möglichkeiten: die Adresse deiner Seite eingeben, eine HTML-Datei hochladen oder den Code direkt ins Textfeld kopieren. Ein paar Sekunden später bekommst du eine Liste mit Fehlern (rot) und Warnungen (gelb), jeweils mit Zeilennummer.
Fehlermeldungen lesen lernen
Die Meldungen sind auf Englisch und klingen erstmal streng, meinen aber meist einfache Dinge:
| Meldung (sinngemäß) | Was dahinter steckt |
|---|---|
| "Unclosed element p" | Ein schließendes Tag fehlt. Passiert beim Umbauen ständig. |
| "Stray end tag" | Ein schließendes Tag zu viel, das öffnende wurde wohl gelöscht. |
| "Duplicate ID" | Dieselbe id zweimal vergeben. IDs müssen eindeutig sein, siehe Attribute. |
| "An img element must have an alt attribute" | Einem Bild fehlt der Alternativtext. Wichtig für Barrierefreiheit, Details auf der img-Seite. |
| "Element X not allowed as child of Y" | Falsche Verschachtelung, etwa ein Block-Element in einem <p>. Hintergrund im Kapitel Block und Inline. |
Ein Tipp aus der Praxis: fang bei der ersten Meldung an, nicht bei der Interessantesten. Ein einziger vergessener Tag kann eine Kaskade von Folgefehlern auslösen, die nach dem Beheben alle von selbst verschwindn.
Warum das Ganze?
- Valider Code verhält sich in allen Browsern berechenbarer.
- Hilfstechnik wie Screenreader kommt mit sauberem Code deutlich besser klar.
- Fehlersuche wird leichter: wenn der Validator nichts findet, liegt das Problem woanders, meist im CSS.
- Du lernst dabei. Die Meldungen zeigen dir genau die Regeln die du noch nicht kanntest.
Übrigens: Auch KI-generierter Code gehört durch den Validator. Sprachmodelle produzieren erstaunlich oft fast-valides HTML mit kleinen Macken. Wie man KI-Code systematisch prüft, steht im Bereich KI-Code richtig prüfen.
Weiter im Lernpfad: HTML5 · Zurück zur HTML-Übersicht