Website HTML Validator
Was der Validator im Markup findet
Aufzählung, verwaister Eintrag, doppelte ID: drei Stellen im ausgelieferten HTML.
Website als Dokument
Vom Quelltext zur Fundstelle
Der Validator verbindet eine Meldung mit Zeile, Ausschnitt und HTML-Regel. Erst diese Spur führt zur richtigen Vorlage.
Source
leistungen.html<!doctype html><html lang="de"><head><meta charset="utf-8"><title>Leistungen</title></head><body><main><p id="hinweis">Auswahl</p><p id="hinweis">Mehr Auswahl</p>1<ul><p>Unsere Leistungen</p><li>Beratung</li></ul>2<li>Schulung</li>3</main></body></html>
Messages
error · line · extractDuplicate ID “hinweis”.
Zwei Elemente teilen denselben Bezeichner. Verweise werden mehrdeutig.
Element “p” not allowed as child of “ul”.
Direkte Kinder der Liste müssen Listeneinträge sein.
Element “li” not allowed as child of “main”.
Der verwaiste Eintrag braucht eine übergeordnete Liste.
Prüfweg
Welche Fassung des Dokuments wird geprüft?
https://example.org/leistungenMarkup, Medientyp und Zeichencodierung
Typ, Zeile, Spalte und markierter Bereich
Für nachgeladene Zustände prüfen Sie zusätzlich den serialisierten DOM oder das Bauteil im Browser. Die URL-Prüfung beginnt bei der abgerufenen Antwort.
Korrekturkarte
Drei Meldungen, drei Änderungen am selben Ausschnitt
Beginnen Sie mit der ersten strukturellen Meldung. Ein früher Fehler kann weitere Meldungen auslösen oder ihre Zeilen verschieben.
Vorher 3 Fehler
<p id="hinweis">Auswahl</p>
<p id="hinweis">Mehr Auswahl</p>
<ul>
<p>Unsere Leistungen</p>
<li>Beratung</li>
</ul>
<li>Schulung</li>Nachher 0 Fehler im Beispiel
<p id="hinweis-auswahl">Auswahl</p>
<p id="hinweis-mehr">Mehr Auswahl</p>
<p>Unsere Leistungen</p>
<ul>
<li>Beratung</li>
<li>Schulung</li>
</ul>Fundstelle zuordnen
Das Wiederholungsmuster zeigt zum Eigentümer
Nur diese SeiteInhalt oder HTML-BlockIm Seitentext suchen.
Viele SeitentypenKomponente oder PluginEine gemeinsame Ausgabe korrigieren.
Jede SeiteTheme oder LayoutKopf, Navigation und Fuß prüfen.
Erst nach einer AktionJavaScript-ZustandDen Live-DOM im Browser untersuchen.
Ergebnis richtig lesen
Null gemeldete Fehler ist ein Zwischenstand
v.Nu beschreibt sich selbst als Checker, nicht als Zertifizierung. Das Werkzeug findet unbeabsichtigte Markupfehler. Ob Inhalte verständlich sind und Bedienwege funktionieren, prüfen Sie weiterhin im Browser und mit unterstützender Technik.
Quellen und Werkzeuge
Prüfen Sie eine öffentliche Adresse im Nu Html Checker. Seine offizielle Seite About this checker erklärt Zweck und Grenzen. Für automatisierte Auswertung dokumentiert das v.Nu-Projekt das JSON-Ausgabeformat mit Meldung, Zeile und Quelltextauszug.
So prüfen Sie es
Adresse prüfen, obersten Fehler beheben, erneut abrufen
- Adresse einsetzen. Tragen Sie die vollständige URL unter „Document URL“ ein.
- Quelltext einblenden. Aktivieren Sie „Show source“ und starten Sie „Check“.
- Erste Meldung öffnen. Ordnen Sie Zeile und Extract Ihrer Vorlage oder Komponente zu.
- Veröffentlichen und wiederholen. Prüfen Sie dieselbe URL erneut und vergleichen Sie den Bericht.
Aus dem Prüfbericht
Drei Meldungen aus dem Markup
Kritisch Ein Absatz steckt in der Aufzählung Regel list
Der Validator meldet p als direktes Kind von ul. Die Beschreibung gehört vor die Liste, Einträge gehören in li.
Kritisch Ein Eintrag steht außerhalb der Liste Regel listitem
Ein li hinter dem schließenden ul-Tag hat kein Listenelement als Elternknoten. Verschieben Sie es in die Liste hinein.
Prüfen Dieselbe id kommt zweimal vor Regel duplicate-id-aria
Ein aria-describedby trifft dann auf zwei Absätze. Der Validator zeigt die doppelte id, eindeutige Bezeichner lösen den Verweis auf.
Zum Mitnehmen
Die Listenstruktur, korrigiert
Drei kleine Änderungen im HTML. Das Aussehen bleibt, wie es ist.
Korrektur in 3 Schritten ansehen
Die Beschreibung vor die Liste setzen
Ein Absatz direkt in ul ist kein Listeneintrag. Vor der Liste bleibt er lesbar und die Aufzählung sauber.
KorrekturvergleichSchritt 1 · HTML Vorher
<ul> <p>Unsere Leistungen</p> <li>Beratung</li> </ul>Nachher
<p>Unsere Leistungen</p> <ul> <li>Beratung</li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Im Browser trägt nur noch „Beratung“ einen Aufzählungspunkt. Die Beschreibung steht bündig davor.
Den verwaisten Eintrag einsortieren
Ein li nach dem schließenden ul-Tag gehört zu keiner Liste. In der Liste trägt es die Aufzählung mit.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul> <li>Beratung</li> </ul> <li>Schulung</li>Nachher
<ul> <li>Beratung</li> <li>Schulung</li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Beide Punkte stehen jetzt gleich weit eingerückt untereinander, ohne Sprung nach links.
Doppelte id eindeutig machen
Zwei Absätze mit derselben id machen den Verweis mehrdeutig. Jeder Text bekommt einen eigenen Bezeichner, der Verweis nennt den gewollten.
KorrekturvergleichSchritt 3 · HTML Vorher
<article aria-describedby="hinweis"> <p id="hinweis">Preise inklusive Mehrwertsteuer.</p> <p id="hinweis">Angebot gilt bis Jahresende.</p> </article>Nachher
<article aria-describedby="hinweis-preise"> <p id="hinweis-preise">Preise inklusive Mehrwertsteuer.</p> <p id="hinweis-frist">Angebot gilt bis Jahresende.</p> </article>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im Quelltext nach dem Bezeichner. Er kommt jetzt genau einmal vor.