Korrektes valides HTML

HTML ist tolerant

Wer einmal ein kompliziertes Layout in HTML und CSS gemeißelt hat, lernt schnell, dass valides sauberes HTML bei der Fehlersuche hilft. Darüber hinaus setzen CSS und vor allem Javascript und das DOM (Document Object Model) auf sauber codiertes HTML. Anders als bei klassischen Programmiersprachen zeigen die Browser keine Fehlermeldungen bei Fehlern im HTML-Markup. Webseiten mit HTML-Elementen, die es nicht gibt, nie gab oder die schon vor einem Jahrzehnt nur Sondermüll waren, können durchaus ein gutes Bild abgeben.

Die hohe Toleranz von HTML macht unsere Webseiten vorwärts und rückwärts kompatibel. Webseiten aus dem Jahr 1998 sind immer noch lesbar, diese Webseite wird auch 2025 in Firefox 510 und Chrome 707 noch lesbar sein. Selbst Mosaik, der Urvater aller Browser, bringt diese Seiten noch in Gang.

HTML-Fehler vermeiden, bevor sie zurückschlagen

Fehlerhaftes HTML fällt oft erst ins Auge, wenn CSS oder Javascript nicht das bringen, was wir uns erhofft haben. Ein Gang zum Validator holt die Fehlerquellen schneller ans Licht als Rütteln und Schütteln am CSS oder der Debugger für Javascript.

Der Markup Validation Service zeigt fehlende Elemente genauso wie zu früh geschlossene Container-Elemente. Wenn das HTML korrekt ist, dauert die Prüfung nur ein paar Sekunden.

Fünf Gründe für die Validierung

Inkonsistente Auto-Korrektur der Browser

Wenn das HTML nicht korrekt ist, tritt die Auto-Korrektur der Browser in Kraft. Allerdings haben die Browser nicht unbedingt dieselbe Vorstellung, was, wie und ob falsches HTML korrigiert werden soll. Es kann sein, dass Firefox ein vergessenes schließendes Tag automatisch schließt, Safari und IE aber nicht. Dann sitzt die Seite in einem Browser korrekt, im nächsten läuft sie aus dem Ruder.

Fehlerfreies HTML ist schneller

Die Browser können Seiten mit (mehr oder minder) fehlerfreiem HTML schneller rendern, weil sie keine Korrekturen durchführen müssen.

Einfacher für Screenreader

Mit validem HTML können Screen Reader Besuchern mit Handycaps bessere Alternativen zum Lesen und Sehen der Seiten zu bieten. Valides HTML ist barrierefrei und zugreifbar für alternative Ausgabegeräte.

Einfacheres CSS

Korrektes HTML und eine klare Struktur kommen dem CSS entgegen. Fehler und Missverständnisse zwischen HTML und CSS führen zu stundenlangem Suchen nach den Ursachen.

Weniger Javascript-Probleme

Javascript baut auf valides HTML. Genauso wie das CSS profitiert die Fehlersuche von sauberem HTML, dazu kommt eine geringere Fehleranfälligkeit. Scripte für Slideshow und User Interface funktionieren auf Anhieb, denn fast immer ist das HTML schuld, wenn Scripte Fehlermeldungen spucken statt das nächste Bild der Slideshow zu liefern.

Die häufigsten Fehler im HTML

Falsch platzierte HTML-Tags

z.B. ein p-Element direkt unter table, tr oder unter einem ul-Element. Die Browser setzen solche Elemente zwar verzeihend über die Tabelle bzw. über die Liste, aber der Validator meldet einen Fehler. Javascript steigt aus, jQuery erkennt zwar viele Fehler, aber wird langsam.

Nicht geschlossene Tags

Zwar müssen Flow Content-Elemente wie li, tr, th, td und p nicht geschlossen werden, wohl aber em, strong und h-Elemente. Diese Fehler sehen wir meist auf Anhieb, denn diese Tags verändern die Darstellung von Elementen.

Überflüssige schließende Tags

erzeugen eine Fehlermeldung: Stray end Tag. Ein überflüssiges schließendes div-Tag zieht das Layout schnell in den Abgrund.

Valides HTML für die Suchmaschinen?

In wie weit sich die Suchmaschinen – in erster Linie natürlich Google – um korrektes HTML kümmern, kann außer den Google-Entwicklern niemand mit Gewissheit sagen. Wir müssen nur einen Blick auf das Markup von erfolgreichen Seiten werfen: Die meisten triefen nur so von Fehlern.

Eines allerdings ist sicher:

• Valides HTML pusht das Ranking von Seiten in den Suchergebnissen nicht, sondern guter Inhalt. Die Suchmaschinen bevorzugen Seiten, die aus Sicht des Besuchers klar strukturiert sind und interessanten Inhalt bieten. Die Suchmaschinen machen das an Faktoren wie wiederkehrende Besucher und der Aufenthaltszeit fest.
• Klar strukturiertes Markup macht es den Suchmaschinen allerdings einfacher, mehr Inhalt zu extrahieren, der für Besucher interessant ist.

Korrektes Markup

Die Frage ist nicht, ob wir ein paar veraltete Tags benutzen, ein LI-Element nicht schließen, sondern ob die Passage gut lesbar ist, wenn das Javascript wegfällt, wenn die Seite im Screenreader vorgelesen wird, in Blindenschrift auf der Braillezeile erscheint. Wie einfach sind Änderungen, wenn ein neuer Punkt im gleichen Stil eingesetzt wird?

Groß- oder Kleinschreibung sind wieder wie einst in HTML 4 irrelevant – aber ein gewisses Maß an Konsistenz erleichtert die Pflege, wenn wir Änderungen ein oder zwei Jahre später durchführen.

Für den Leser sind die Ladezeit der Seite und die Lesbarkeit auf dem Handy relevant.

Für die Suchmaschinen ist es nicht wirklich relevant, ob wir ein section-Tag oder article einsetzen – Hauptsache, der Text ist lesbar und wird gelesen.

HTML Content Model

HTML5 ersetzt das einfache Konzept von Block- und Inline-Tags der frühen Tage durch ein detaillierteres Content Model von sieben (tatsächlich: 7) Content-Kategorien. Die Kategorien überlappen einander teilweise.

Diese Kategorien entscheiden darüber, welche Elemente innerhalb von anderen Elementen platziert werden können. Das HTML-link-Element gehört z.B. zu Metadata und sitzt dann innerhalb des HEAD-Elements, darf aber auch in das body-Element platziert werden.

Das HTML p-Element ist Flow Content, darf a- und span-Elemente enthalten, Bilder und Formularfelder, aber keine Listen mit ul- oder ol-Elementen.

Das Content Modell wirkt kompliziert und eröffnet sich erst, wenn die grundlegenden HTML-Elemente und ihr Verhalten »sitzen«.

Ein vereinfachtes Schema:

Quelle: WhatWG Living Standard

• Flow Content alles, was man direkt in das body-Element stecken kann: a-Tags, div, form, header. Wenn ein Tag Text oder Embedded Content enthalten kann, ist es Flow Content.
• Metadata Content sitzt i.d.R. im head, z.B. link, style, script, meta
• Phrasing Content ist der Text der Seite mitsamt allen Tags, die Text markieren und hervorheben: a, em, span, – gut zu vergleichen mit Inline-Elementen der vorangegangenen HTML-Spezifikationen. Ebenfalls ein gutes Kriterium: Phrasing-Content kann innerhalb eines Satzes sitzen.
  Phrasing Content braucht immer ein schließendes Tag.
• Embedded Content sind Elemente wie object, video, canvas, math, svg
• Zu Interactive Content zählen Elemente, die auf ein Aktion des Benutzers reagieren: a-Tags, details, object, video
• Sectioning Content enthält article, section, aside, nav.
• Heading Content enthält die Überschrifts-Tags h1 bis h6.
  h-Tags müssen geschlossen werden.

Formulare haben ein eigenes Content Model.

Und was bringt das Ganze? Das Modell soll das Verständnis für das korrekte Verschachteln von HTML-Tags für eine saubere Gliederung der Seite unterstützen.

So abstrakt dieses Modell auf den ersten Blick erscheint, so wichtig ist es für einen logischen und pflegeleichten Aufbau des HTML-Markups der Webseite. Die grafische Aufbereitung durch CSS platziert heute ohne Tricks und Hacks die Module an jede beliebige Stelle im Browser, egal auf welchem Typ von Monitor.

Für Benutzer mit Screenreadern und auch für die Suchmaschinen bedeuten sauber gegliederte Webseiten eine einfachere Navigation und einen schnellen Zugang zu den wichtigsten Daten.