Korrektes valides HTML

Korrektes valides HTML – sauberes Markup

Ob das HTML-Markup der Webseite nun ein paar Fehler aufweist oder nicht – wen kümmert das? Die Browser verzeihen viele Fehler, aber irgendwann rächen sie sich.

Wer einmal ein kompliziertes Layout in HTML und CSS gemeißelt hat, lernt schnell, dass valides HTML bei der Fehlersuche hilft. Darüber hinaus setzen Javascript und das DOM (Document Object Model) auf sauber codiertes HTML.

Anders als bei klassisches Programmiersprachen zeigen die Browser keine Fehlermeldungen bei mangelhaftem HTML-Code. Webseiten mit Tags, 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 Toleranzgrenze 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.

Fehler vermeiden, bevor sie zurückschlagen

XHTML, der Vorläufer von HTML5, hatte strenge Regeln und davon viele, aber gerade die strengen Regeln haben Front-End-Entwickler das Leben leichter gemacht, denn XHTML-Dokumente mit einem Validator geprüft werden.

HTML5 ist der Nachfolger von HTML4 und tritt nicht in die Fußstapfen von XHTML. Viele der Regeln aus XHTML gelten in HTML5 nicht mehr. Es schadet aber nicht, sich einen Teil des XHTML-Regelwerks anzueignen, denn diese Regeln haben viele Fehler vermieden.

Auf jeden Fall ist es einfacher geworden, valides sauberes HTML zu schreiben und der Gang zum Validator fällt leichter.

Markup Validation Service

5 Gründe, warum sich Validierung lohnt

Media Type: Listen! Braille, TV, Handheld, Projection
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
Valides HTML macht es Screen Readern einfacher, Besuchern mit Handycaps Alternativen zum Lesen und Sehen der Seiten zu bieten. Valides HTML ist barrierefrei und zugreifbar für alternative Ausgabegeräte.
Einfacheres CSS
Korrektes valides 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.

HTML5-Regeln

Das sind die wichtigsten Änderungen gegenüber den älteren Version von HTML:

Doctype
Der Doctype von HTML5 ist einfach und könnte (rein theoretisch) sogar weggelassen werden.

<!DOCTYPE html>
<html>
Groß- und Kleinschreibung
HTML5-Tags können in Klein- oder Großbuchstaben geschrieben werden. Hochkommas müssen nicht sein, es sei denn, es gibt mehr als ein Attribut.

<FORM action="mailer.php" method=POST>
<textarea NAME="text"> </textarea>
</FORM>
Leere Tags müssen nicht schließen
Leere Tags (z.B. meta, link, img) müssen nicht geschlossen werden, Flow-Content-Elemente wie p, li und dt auch nicht.

<ul>
<li>Punkt 1
<li>Punkt 1
</ul>
a-Tags rundherum
Das a-Tag, dass immer nur inline-Elemente wie Text, img, em und span umschließen durfte, darf jetzt ganze Passagen und auch Block-Tags einschließen.

<a href="">
<p>Punkt 1</p>
<div>Punkt 2</div>
</a>

Die Frage ist nicht, ob wir ein paar veraltete Tags benutzen, ein LI-Element nicht schließen, sondern ob die Passage noch 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.

Die häufigsten Fehler

Nicht geschlossene Tags
Zwar müssen Flow Content-Tags wie li, tr, th, td und p nicht geschlossen werden, wohl aber em, strong und h-Tags. Diese Fehler sehen wir aber 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 Tag kann das Layout in den Abgrund ziehen.
Falsch platzierte Tags
z.B. ein p-Tag unter table, tr oder unter einem ul. 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.

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.

HTML5: Block-Elemente und Inline-Elemente

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

  • Flow Content alles, was man direkt in den body-Type stecken kann: a-Tags, div, form, header.
  • 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.
    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
  • Heading Content enthält die Überschrifts-Tags h1 bis h6.
    h-Tags müssen geschlossen werden.
  • Sectioning Content enthält article, section, aside, nav.
  • 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 unterstützen.

Valides HTML Media Type: Listen! Braille, TV, Handheld, Projection