Webseiten richtig validieren

In dem Artikel Muss eine Webseite valide sein? habe ich gestern erklärt, was mit Validität gemeint ist, warum so viele Seiten im Internet nicht valide sind und welche Vorteile eine valide Webseite bietet. Im zweiten Artikel zum Thema Validieren geht es heute darum, wie ihr einfach eine valide Webseite erstellt, wie der W3C-Validator funktioniert und wie ihr die 10 häufigsten Validierungsfehler beheben könnt.

Grundgerüst für eine valide Webseite

Am einfachsten vermeidet ihr Validierungsfehler, wenn ihr euch ein HTML-Grundgerüst erstellt, das ihr als Vorlage für alle weiteren Seiten verwendet. Wenn dieses Grundgerüst ohne Fehler validiert wurde, treten bei darauf basierenden Webseiten normalerweise nur noch Flüchtigkeitsfehler auf. Ein minimales Grundgerüst, das ihr allerdings noch erweitern müsst, findet ihr z. B. bei SELFHTML.

Richtig validieren mit dem W3C-Validator

Der W3C-Validator ist recht einfach zu bedienen, bietet aber auch noch einige zusätzliche Optionen, mit denen ihr euch die Validierung eurer Webseite erleichtern könnt.

Die simpelste Möglichkeit die Validierung zu starten, ist auf der Startseite des W3C-Validators die URL der Webseite einzutragen, die ihr validieren möchtet. Wenn eure Webseite aber noch nicht online ist, könnt ihr unter „Validate by File Upload“ auch einfach eine html-Datei zur Überprüfung hochladen. Bevorzugt ihr dagegen Copy & Paste, könnt ihr mit „Validate by Direct Input“ den Quelltext in ein Fenster kopieren und auf diese Weise die Validierung starten.

Unter „More Options“ solltet ihr bei „Show Source“ noch einen Haken setzen. Dann könnt ihr mit einem Klick auf die Zeilennummer direkt in die entsprechende Zeile des Sourcecodes springen, der unterhalb der Fehlermeldungen eingeblendet wird.

Generell solltet ihr beim Validieren beachten, dass ihr die Fehler von oben nach unten korrigiert. Diese Reihenfolge ist deshalb so wichtig, weil viele Fehler Folgefehler aus anderen Fehlern sind. Es kann durchaus sein, dass z. B. 10 Fehler angezeigt werden, es sich in aber Wirklichkeit nur um einen Fehler handelt. Am besten startet ihr die Validierung nach jeder Fehlerkorrektur neu, damit ihr seht, welche Fehler danach noch vorhanden sind.

Häufige Fehlermeldungen des W3C-Validators

Die folgenden 10 Fehlermeldungen treten sehr oft beim Validieren auf:

character „&“ is the first character of a delimiter but occurred as data

Diese Meldung bedeutet, dass der Validator ein Zeichen gefunden hat, das er nicht versteht. Dabei kann es sich um einen Umlaut, ein „ß“ oder um ein anderes Sonderzeichen handeln. Diese Zeichen müssen dann „maskiert“ werden, d. h. sie müssen so kodiert werden, dass sie der Browser versteht. Eine gute Übersicht über das Maskieren von Sonderzeichen gibt es z. B. bei SELFHTML. Ein Generator zum Erzeugen der richtigen Kodierung findet ihr bei Leftlogic.

required attribute „alt“ not specified

Diese Fehlermeldung tritt auf, wenn ihr eine Grafik mit dem <img>-Tag anzeigen lässt, aber keinen Alternativ-Text angegeben hat. Dieser sollte eine Beschreibung des Bildes beinhalten und ist z. B. für Blinde wichtig, die die Grafik ja nicht sehen können und deshalb auf diesen Alternativ-Text angewiesen sind. Bei reinen Ziergrafiken solltet ihr keinen Text angeben, also so: alt=““. Weitere Tipps dazu findet ihr wieder bei SELFHTML.

end tag for element „A“ which is not open

Das bedeutet, dass ihr einen Tag geschlossen habt, den ihr nicht geöffnet hattet. Oder anders herum gesagt, entweder habt ihr den öffnenden Tag wie z. B. <a> vergessen oder ihr habt einen schließenden Tag wie z. B. </a> zuviel gesetzt.

end tag for „div“ omitted, but OMITTAG NO was specified

Diese Meldung ist das Gegenstück zu der vorhergehenden Fehlermeldung. Hier bemängelt der Validator, dass es zwar einen Start-Tag, aber keinen End-Tag gibt. Entweder habt ihr einen Start-Tag doppelt oder was häufiger vorkommt, den End-Tag vergessen.

required attribute „TYPE“ not specified

Diese Fehlermeldung erscheint z. B. wenn ihr eine Javascript-Datei in euren Quelltext einbindet und vergessen habt, den Typ anzugeben. Eine Javascript-Datei wird so eingebunden:

<script src="https://example.com/jquery.js" type="text/javascript"></script>

there is no attribute „WIDTH“

Diese Meldung wird ausgegeben, wenn ihr ein Attribut benutzt, das von dem jeweiligen Tag nicht unterstützt wird. Eine Übersicht der zulässigen Attribute findet ihr bei SELFHTML.

document type does not allow element „body“ here

Dieser Fehler kann angezeigt werden, wenn ihr ein Element an der falschen Stelle im Quelltext verwendet, z. B. das Element <body> bevor ihr den Seitenkopf mit </head> abgeschlossen habt.

character „<“ is the first character of a delimiter but occurred as data

Diese Fehlermeldung erscheint z. B. wenn ihr vergessen habt, einen Tag mit einem „>“ zu schließen, also z. B. so:

<p

literal is missing closing delimiter

Diese Meldung wird ausgegeben, wenn ihr z. B. bei einer Pfadangabe das abschließende Anführungszeichen vergessen habt, also so:

<a href="http://example.com>

document type does not allow element „TD“ here; assuming missing „TR“ start-tag

Wenn diese Fehlermeldung beim Validieren erscheint, habt ihr in einer Tabelle den Tag <td> benutzt, ohne zuvor <tr> verwendet zu haben.

Webseiten in mehreren Browsern überprüfen

Wenn eine Webseite vom Validator erfolgreich überprüft wurde, ist das zwar Grundvoraussetzung dafür, dass eine Seite fehlerfrei angezeigt wird. Da allerdings nicht alle Browser den W3C-Standard 100% richtig umsetzen, könnt ihr euch dessen nicht sicher sein. Deshalb solltet ihr euch eure Webseite nach dem Validieren noch in verschiedenen Browsern aufrufen, damit ihr sehen könnt, ob sie wirklich so angezeigt wird, wie ihr es euch vorgestellt habt.

Um euch diese Arbeit zu erleichtern könnt ihr auch den Onlinedienst Browsershots verwenden. Dieser erstellt Screenshots eurer Webseite unter verschiedenen Browsern und Betriebssystemen. Wenn dort alles so aussieht, wie ihr es geplant habt, dann könnt ihr sicher sein, dass eure Webseite überall richtig angezeigt wird.

Validiert ihr eure Webseiten?

Wie geht ihr beim Erstellen von Webseiten vor? Validiert ihr diese oder ist es euch egal, wenn ihr eine Webseite mit vielen Fehlern habt? Schreibt doch bitte in den Kommentaren etwas dazu.

Muss eine Webseite valide sein?

Das Website Handbuch: Programmierung und Design