CSS, HTML und Javascript mit {stil}

Valides HTML / HTML5

Valides HTML

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 mit Mosaik, der Urvater aller Browser, bringt diese Seiten noch in Gang.

Warum also sollte man sich die Mühe geben, sauberes valides HTML zu schreiben?

XHTML hatte strenge Regeln – und davon viele –, aber gerade die strengen Regeln haben dem Webdesigner das Leben einfach gemacht. Auch wenn der größte Teil aller XHTML-Seiten nur anhand des Doctypes vorgab, XHTML zu sein, konnten HTML-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

Valides HTML für Screenreader und funktionierendes CSS und Javascript
  1. 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, im nächsten läuft sie aus dem Ruder.
  2. Die Browser können Seiten mit (mehr oder minder) fehlerfreiem HTML schneller rendern, weil sie keine Korrekturen durchführen müssen.
  3. Sauberes HTML macht es Screen Readern einfacher, Besuchern mit Handycaps Alternativen zum Lesen und Sehen der Seiten zu bieten. Sauberes HTML ist barrierefrei und zugreifbar für alternative Ausgabegeräte.
  4. 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.
  5. 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 XHTML:

Doctype
<!DOCTYPE html>
<html>

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

html, head und body
<html> 
   <head> </head>
   <body> </body>
</html>

Die Browser erkennen automatisch, welche Tags zum head bzw. body gehören.

HTML Groß- oder Kleinschreibung?
<FORM action="mailer.php" method=POST>
   <textarea NAME="text"></textarea>
</FORM>

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.

Nicht alle Tags müssen schließen
<ul>
  <li>Punkt 1
  <li>Punkt 1
</ul> 

Leere Tags (z.B. meta, link, img) müssen nicht geschlossen werden, Flow-Content-Elemente wie p, li und dt auch nicht.

Mit korrektem einfachen HTML entsteht mit wenigen Zeilen CSS und Javascript ein Accordion mit weichen Transitionen. 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

  • Tags, die nicht mehr zum Standard gehören. So gehören nicht nur die alten Tags wie font und big nicht mehr zum Standard, sondern HTML5 hat in den Anfängen Tags wie hgroup hervorgebracht, die wieder aus dem Standard entfernt wurden.
  • 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.
  • Falsch platzierte Tags, z.B. ein p-Tag unter table oder tr. Die Browser setzen solche Elemente zwar verzeihend über die Tabelle, aber der Validator meldet einen Fehler. Javascript steigt aus, jQuery erkennt zwar viele Fehler, aber wird langsam.
  • Überflüssige schließende Tags erzeugen eine Fehlermeldung: Stray end Tag. Ein überflüssiges schließendes Tag kann das Layout in den Abgrund ziehen.
  • Zwar ist dank des HTML5 header-Tags jetzt mehr als ein h1-Element erlaubt, aber der Validator erzeugt einen Warnhinweis, denn das h1-Tag wird von Screen Readern und anderen Tools immer noch als Top-Level-Überschrift gesehen.

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, heading, style (aber nur mit Attribut scoped).
    Flow Content-Tags müssen nicht geschlossen werden.
  • 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.