Tokenlabor

HTML validieren

HTML validieren direkt im Browser: nicht geschlossene Tags, doppelte IDs, fehlende alt-, lang- und title-Angaben und die Überschriften-Hierarchie auf einen Blick.

–

 

Meldungen
SchwereZeileMeldung
Überschriften-Gliederung

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Was geprüft wird und was nicht

Dieses Werkzeug kann HTML validieren, ohne dass der Quelltext Ihren Rechner verlässt. Es arbeitet in zwei Stufen. Ein eigener Tokenizer liest den Text Zeichen für Zeichen und findet nicht geschlossene Tags, schließende Tags ohne Gegenstück, falsch verschachtelte Elemente, doppelte Attribute, offene Kommentare und Anführungszeichen. Dabei kennt er die Regeln von HTML: leere Elemente wie img oder br brauchen kein End-Tag, und bei p, li, td oder option darf es fehlen.

Danach liest der Browser das Dokument mit DOMParser ein, und der HTML-Validator prüft Inhaltliches: doppelte IDs, Bilder, bei denen das alt-Attribut fehlt, eine fehlende Sprache am html-Element, ein fehlender oder leerer title, Formularfelder ohne Beschriftung, Links und Schaltflächen ohne erkennbaren Text, veraltete Elemente wie font oder center und die Überschriften-Hierarchie. Übersprungene Ebenen, etwa von h2 direkt auf h4, erschweren Screenreader-Nutzern die Orientierung.

Das Werkzeug ersetzt nicht den offiziellen Nu HTML Checker des W3C, der jedes Inhaltsmodell der Spezifikation kennt. Es ist für den schnellen Blick gedacht, wenn Sie HTML prüfen möchten, ob nicht geschlossene Tags, doppelte IDs oder fehlende Alternativtexte übersehen wurden. Zum Einrücken eines unordentlichen Quelltexts eignet sich HTML formatieren, die Bedeutung einzelner Elemente erklärt die HTML-Tags-Referenz.

Anleitung: HTML validieren in 4 Schritten

  1. Fügen Sie den Quelltext einer Seite oder eines Ausschnitts in das Feld „HTML-Quelltext“ ein oder laden Sie eine Datei.
  2. Wählen Sie „Ganze Seite“ oder „Ausschnitt“, damit Prüfungen wie doctype, lang und title passend gewertet werden.
  3. Gehen Sie die Meldungen nach Schwere durch; die Zeilennummer zeigt, wo das Problem beginnt.
  4. Prüfen Sie die Überschriften-Gliederung und korrigieren Sie übersprungene Ebenen.

Typische Anwendungsfälle

  • Vor dem Veröffentlichen einer Vorlage prüfen Sie, ob alle Tags geschlossen und IDs eindeutig sind.
  • Bei einer Barrierefreiheits-Durchsicht finden Sie Bilder ohne alt-Attribut und Formularfelder ohne Beschriftung.
  • HTML aus einem Editor oder CMS wird auf veraltete Elemente wie font oder center geprüft.
  • Für SEO prüfen Sie Titel, Sprache und eine saubere Überschriften-Hierarchie.
Fragen

Häufige Fragen

Warum meldet das Werkzeug ein fehlendes End-Tag bei div, aber nicht bei li?

Für li, p, td, tr, option und einige andere Elemente erlaubt HTML, das End-Tag wegzulassen; der Browser schließt sie automatisch. Bei div, span, a oder section ist das End-Tag Pflicht.

Ist <br/> mit Schrägstrich falsch?

Nein. Bei leeren Elementen wie br, img oder input ist der Schrägstrich erlaubt und wird ignoriert. Bei anderen Elementen wie

ignoriert der Browser ihn ebenfalls, das Element bleibt dann aber offen. Darauf weist das Werkzeug hin.

Warum sind doppelte IDs ein Problem?

IDs müssen im Dokument eindeutig sein. Bei Doppelungen verweisen Sprungmarken, label for, aria-labelledby und getElementById nur auf das erste Element, und Formulare oder Skripte verhalten sich unerwartet.

Wird mein HTML irgendwo hochgeladen?

Nein. Tokenizer und DOMParser laufen in Ihrem Browser, Skripte im eingefügten HTML werden nicht ausgeführt und externe Ressourcen nicht geladen.

Ist leeres alt="" bei Bildern ein Fehler?

Nein. Ein leeres alt-Attribut kennzeichnet ein rein dekoratives Bild, das Screenreader überspringen. Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen vor.

Muss jede Seite genau eine h1 haben?

Die HTML-Spezifikation verlangt das nicht. Für Nutzer von Screenreadern und für eine klare Gliederung ist eine h1 als Hauptüberschrift der Seite aber üblich und empfehlenswert.

Weitere Werkzeuge

Das könnte auch helfen

Alle 558 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen