HTML und XHTML

ohne Fehl und Tadel

W3C validiert

Nun sind wir so weit: wir können unsere HTML-Dateien vom W3C auf Gültigkeit prüfen lassen.

Zunächst schlage ich vor, dass du die Datei buggy.html prüfen lässt, die sich bei den Kursmaterialien befindet. Deren Fehler kenne ich nämlich und kann dir daher auch die zu erwartenden Meldungen etwas ausführlicher erläutern.

Der Validator des W3C findet sich an der Adresse http://validator.w3.org/file-upload.html und wird in einem neuen Browserfenster erscheinen. Du kriegst dann eine Art Formular zu sehen, in dem du die Datei buggy.html angeben kannst (am besten verwendest du den browse...-Knopf). Dann arbeitet's ein wenig, und schon kriegst du das Resultat zu sehen.

Übung 33

Lass nun die Datei buggy.html überprüfen. Die Meldungen werde ich hier im folgenden erläutern.

Schreck, lass nach!

Auf den ersten Blick scheint diese Seite ja eine mittlere Katastrophe zu sein.

Das fängt schon mit einem riesigen roten Balken an, in welchem wir angeschrieen werden, dass unsere Seite den Standards nicht entspreche: This page is not Valid XHTML 1.0 Strict!

Tief durchatmen, wir werden mal genauer hinsehen, was es auszusetzen gibt.

Line 12, column 14: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
<div><img src=banner.gif alt="die Pfefferschote"></div> ^

Das sagt nichts anderes aus, als dass wir den Wert für das src-Attribut nicht in Gänsefüsschen verpackt haben. Na, das ist ja einfach zu korrigieren.

Freundlicherweise wird die Zeile genannt, in der der Fehler gefunden wurde, und nicht nur das: die Zeilennummer ist ein interner Link, denn am Ende der Seite ist unser ganzer HTML-Code nochmals abgedruckt, und der Link führt genau zur betreffenden Zeile 12. Ausserdem wird die Zeile hier bei der Fehlermeldung noch separat angezeigt, zusammen mit einem kleinen, roten Pfeil unter der Stelle, an der's etwas auszusetzen gab.
Line 12, column 52: end tag for "img" omitted, but OMITTAG NO was specified
<div><img src=banner.gif alt="die Pfefferschote"></div> ^
Line 12, column 5: start tag was here (explain...).
<div><img src=banner.gif alt="die Pfefferschote"></div> ^

Diese beiden Meldungen besagen, dass ein <img>-Element nicht sauber oder sogar überhaupt nicht geschlossen sei. Die erste Meldung weist auf die Stelle, an der dieser Abschluss spätestens erwartet worden wäre, die zweite zeigt, wo das <img>-Element beginnt. Tatsächlich handelt es sich ja bei <img> um ein leeres Element, das wir mit /> abschliessen sollten. In unserem Code fehlt der Schrägstrich. Auch das ist also einfach zu korrigieren.
Line 33, column 3: document type does not allow element "h2" here; missing one of "object", "ins", "del", "map", "button" start-tag
<h2>Die Pfefferschote</h2> ^

Danach eine ganze Menge weiterer ähnlicher Meldungen, bis es zuunterst dann heisst:

Line 90, column 6: end tag for "p" omitted, but OMITTAG NO was specified
</body> ^

und

Line 32, column 0: start tag was here (explain...).
<p>Aber erlauben Sie, dass wir uns kurz vorstellen. ^

Das sieht natürlich zunächst nach einer ganzen Menge Fehler aus, aber es ist nur ein einziger. Die zweitletzte Meldung nämlich (die für Zeile 90) sagt dir, dass da mal ein <p>-Element angefangen aber nie mehr beendet wurde. Jedenfalls hat der Validator so lange gesucht, bis plötzlich das Ende des Dokuments (also der Abschluss-Tag für das <body>-Element) erreicht wurde, ohne dass er ein Abschluss-Tag für das angefangene <p>-Element gefunden hätte. Und das <p>-Element, das nun noch immer offen ist, wird in der letzten Meldung genannt. Es steht auf Zeile 32.

Ein Blick in den HTML-Text buggy.html zeigt, dass das stimmt. Auch wenn's in HTML 4 nicht zwingend vorgeschrieben ist - in XHTML muss jedes Element geschlossen werden, auch ein leeres. Schliess also dieses Element noch mit </p> ab, und unser Dokument ist fehlerfrei.

Korrigiere mal die paar Fehler und validiere das Dokument erneut.

Versuch dann auch mal, unsere Übungsseiten zu validieren.

Homepapa
März 2004

Vorheriger Abschnitt:
sauberes HTML

Nächster Abschnitt:
Spezialfälle