HTML validieren

Zuletzt aktualisiert am 3. Februar 2026

HTML ist erstaunlich fehlertolerant: der Browser versucht immer, etwas anzuzeigen, selbst wenn dein Code Fehler enthält. Das klingt erstmal bequem, kann aber zu Problemen führen, die schwer zu finden sind. Validierung hilft dir, Fehler frühzeitig zu erkennen und sauberen, standardkonformen Code zu schreiben.

Warum validieren?

Fehlerhaftes HTML funktioniert oft “irgendwie”, der Browser korrigiert vieles stillschweigend. Aber:

Unterschiedliche Browser korrigieren unterschiedlich: Was in Chrome gut aussieht, kann in Safari anders dargestellt werden, weil die Fehlerkorrektur sich unterscheidet.
CSS und JavaScript können betroffen sein: Wenn der Browser dein HTML anders interpretiert als gedacht, passen CSS-Selektoren oder JavaScript-Abfragen nicht mehr.
Barrierefreiheit leidet: Fehlerhafte Verschachtelung oder fehlende Attribute (wie alt bei Bildern) beeinträchtigen Screenreader.
SEO-Signale: Suchmaschinen bevorzugen sauber strukturierten Code.

Der W3C Validator

Das offizielle Tool zur HTML-Validierung ist der W3C Markup Validation Service. Er prüft deinen Code gegen den HTML-Standard und zeigt Fehler und Warnungen an:

So funktioniert es:

Öffne validator.w3.org
Wähle eine der drei Optionen:
- URL eingeben: prüft eine live Website
- Datei hochladen: prüft eine lokale HTML-Datei
- Code einfügen: prüft direkt eingegebenen HTML-Code
Klicke auf “Check”
Der Validator zeigt eine Liste von Fehlern (Errors) und Warnungen (Warnings)

Fehler vs. Warnungen

Errors (Fehler): Verstöße gegen den HTML-Standard. Diese solltest du immer beheben.
Warnings (Warnungen): Empfehlungen, die nicht zwingend sind, aber die Qualität verbessern.

Häufige Validierungsfehler

Hier sind die Fehler, die am häufigsten auftauchen, und wie du sie behebst:

1. Fehlende oder doppelte Tags

Fehlender schließender Tag

<!-- Fehler: erstes <p> wird nicht geschlossen -->
<p>Erster Absatz
<p>Zweiter Absatz</p>

<!-- Richtig -->

<p>Erster Absatz</p>
<p>Zweiter Absatz</p>

Vorschau

Der Browser schließt das erste <p> automatisch, wenn ein neues <p> beginnt. Das funktioniert, ist aber unsauberer Code, der zu unerwarteten Ergebnissen führen kann.

2. Falsche Verschachtelung

<!-- Fehler: div in p ist nicht erlaubt -->
<p>Text <div>Block</div> mehr Text</p>

<!-- Richtig: p aufteilen oder span verwenden -->
<p>Text</p>
<div>Block</div>
<p>Mehr Text</p>

<!-- Oder: -->
<p>Text <span>Inline</span> mehr Text</p>

Block-Elemente dürfen nicht in Inline-Elemente verschachtelt werden (mit wenigen Ausnahmen wie <a>).

3. Fehlende Pflicht-Attribute

<!-- Fehler: img ohne alt -->
<img src="foto.jpg" />

<!-- Richtig -->
<img src="foto.jpg" alt="Beschreibung des Bildes" />

<!-- Dekorativ -->
<img src="dekoration.svg" alt="" />

4. Doppelte IDs

<!-- Fehler: ID kommt zweimal vor -->
<div id="content">...</div>
<div id="content">...</div>

<!-- Richtig: eindeutige IDs -->
<div id="main-content">...</div>
<div id="sidebar-content">...</div>

5. Fehlende DOCTYPE-Deklaration

<!-- Fehler: kein DOCTYPE -->
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

<!-- Richtig -->
<!DOCTYPE html>
<html lang="de">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

6. Zeichensatz nicht angegeben

<!-- Warnung: kein charset -->
<head>
  <title>Seite</title>
</head>

<!-- Richtig: charset als erstes Element im head -->
<head>
  <meta charset="UTF-8" />
  <title>Seite</title>
</head>

7. Vollständiges valides Dokument

Hier siehst du ein HTML-Dokument, das alle wichtigen Validierungsregeln erfüllt: DOCTYPE, charset, lang-Attribut, alt-Texte, korrekte Verschachtelung und eindeutige IDs:

Ein vollständig valides HTML-Dokument

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <meta name="description"
        content="Eine Beispielseite mit validem HTML">
  <title>Valides HTML-Dokument</title>
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a> |
      <a href="/blog">Blog</a>
    </nav>
  </header>
  <main>
    <h1>Valides HTML</h1>
    <p>Dieses Dokument erfüllt alle Validierungsregeln.</p>
    <ul>
      <li>DOCTYPE vorhanden</li>
      <li>Charset als erstes im head</li>
      <li>lang-Attribut gesetzt</li>
      <li>Alle Tags korrekt geschlossen</li>
    </ul>
    <img src="beispiel.jpg" alt="Ein Beispielbild"
         width="300" height="200">
  </main>
  <footer>
    <p>&copy; 2026 Meine Website</p>
  </footer>
</body>
</html>

Vorschau

Browser DevTools

Die Entwicklertools deines Browsers sind ein weiteres nützliches Werkzeug, auch wenn sie nicht im klassischen Sinne “validieren”:

So öffnest du sie:

Chrome/Edge: F12 oder Strg + Shift + I (Mac: Cmd + Option + I)
Firefox: F12 oder Strg + Shift + I
Safari: Cmd + Option + I (Develop-Menü muss aktiviert sein)

Elements-Tab

Im Elements-Tab (oder “Inspektor” in Firefox) siehst du den DOM, also wie der Browser dein HTML interpretiert hat. Wenn du fehlerhaften Code geschrieben hast, zeigt der DOM die korrigierte Version:

<!-- Dein Code -->
<p>Text <div>Block</div></p>

<!-- Was der Browser daraus macht (im DOM) -->
<p>Text </p>
<div>Block</div>
<p></p>

Das ist nützlich, um zu verstehen, warum dein Layout nicht so aussieht wie erwartet.

Console-Tab

Manche HTML-Fehler erscheinen als Warnungen in der Konsole, besonders bei ungültigen Attributen oder fehlenden Ressourcen.

Editor-Tools

Moderne Editoren können HTML direkt beim Schreiben prüfen:

VS Code

Eingebaute Validierung: VS Code markiert offensichtliche Fehler wie fehlende schließende Tags direkt im Editor
HTMLHint Extension: Erweiterung für umfassendere HTML-Validierung mit konfigurierbaren Regeln
axe Accessibility Linter: Prüft Barrierefreiheit direkt im Editor

Automatisierte Prüfung

Für größere Projekte lohnt sich eine automatisierte Validierung im Build-Prozess:

# html-validate als npm-Paket
npm install --save-dev html-validate

# Validierung ausführen
npx html-validate "dist/**/*.html"

Lighthouse Audit

Googles Lighthouse ist in den Chrome DevTools eingebaut und prüft neben Performance und SEO auch die Barrierefreiheit:

Öffne die DevTools (F12)
Gehe zum Tab “Lighthouse”
Wähle die Kategorien (Accessibility, Best Practices, SEO)
Klicke “Analyze page load”

Lighthouse gibt dir eine Punktzahl und konkrete Empfehlungen. Die Accessibility-Prüfung deckt viele HTML-Probleme auf: fehlende Alt-Texte, Label-Probleme, Kontrastfehler.

Checkliste für valides HTML

<!DOCTYPE html> als erste Zeile
<meta charset="UTF-8"> als erstes Element im <head>
lang-Attribut am <html>-Element
Jedes <img> hat ein alt-Attribut
Alle IDs sind eindeutig
Alle Tags sind korrekt geschlossen
Keine Block-Elemente in Inline-Elementen
Alle Formular-Inputs haben ein Label
Überschriften-Hierarchie wird eingehalten (keine übersprungenen Ebenen)
Keine veralteten (deprecated) Elemente oder Attribute

Zusammenfassung

Tool / Methode	Wann verwenden
W3C Validator	Umfassende Prüfung gegen den Standard
Browser DevTools	Live-Debugging und DOM-Inspektion
Editor Extensions	Fehler beim Schreiben erkennen
Lighthouse	Accessibility + SEO + Best Practices
html-validate (npm)	Automatisierte Prüfung im Build-Prozess

Validierung ist kein Selbstzweck: sie hilft dir, besseren, robusteren und zugänglicheren Code zu schreiben. Es muss nicht immer 100% fehlerfrei sein, aber die häufigsten Fehler (fehlende Alt-Texte, kaputte Verschachtelung, doppelte IDs) solltest du vermeiden.

Du kennst jetzt alle HTML-Grundlagen. Als Nächstes kannst du in die HTML-Referenz eintauchen und die einzelnen Elemente im Detail kennenlernen.

Erhalte neue Inhalte direkt in dein Postfach

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.