Webseiten richtig validieren

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.

Erfolgsmeldung des W3C-Validators nach dem Validieren
Erfolgsmeldung des W3C-Validators nach dem Validieren

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?

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

12 thoughts on “Webseiten richtig validieren”

  1. Ich mach den Test ab und an, da ich manchmal auch Sachen vergesse, die durchaus dann wichtig sein können aus SEO-Sicht.

    Kannst du vielleicht mal einen Artikel schreiben zum Thema, wo man vielleicht aus SEO-Sicht durchleutet welche Attribute, meta-tags, etc. wichtig sind?
    Ich glaube nämlich, dass durchaus einige Onpage-Kniffe wichtig sein könnten.
    Denn viele Sachen, vom W3C sind ja durchaus sehr vernünftig und viele Angaben, vielleicht unnütze für die User, könnten aber technisch durchaus eingelesen werden. Z.B. meta-tag archivangaben, Sprungmarken in den eigentlichen content am Menü vorbei, Kennzeichnung vom footer, etc.

  2. Wie ich im anderen Artikel schon geschrieben habe, gehört die valide Programmierung in meinen Augen zum Grundgerüst eines Webdesigners. Aus diesem Grund prüfe ich die Webseiten immer und bügle kleine Fehlerchen aus, die sich eingeschlichen haben sollten, wenn ich mal wieder etwas Neues erstelle.
    Im Laufe der Zeit bin ich dann aber doch etwas nachlässig 😉
    Wichtiger als die Validität finde ich aber die browserkonforme Darstellung, so dass diese bei mir vor allem anderen kommt. Es soll zumindest nichts zerschossen beim User ankommen.

  3. @Sergiu Über Metatags habe ich bereits in den Artikeln Der optimale Titel und Die optimale Description etwas geschrieben. Außer diesen ist nur noch der robots-Metatag relevant. Es wird demnächst einen Artikel von mir über die robots.txt geben. Da werde ich diesen Metatag dann gleich mit erschlagen 🙂 Bei den anderen beiden Punkten (Sprungmarken, Footer) bin ich mir nicht ganz sicher, worum es dir da geht. Vielleicht kannst du das nochmal näher erklären (gerne auch per E-Mail).

    @KuLiSN Ich gehe normalerweise auch nicht direkt auf die W3C-Seite, sondern nutze das AddOn Web-Developer dafür, über das ich auch in dem Artikel Die 10 wichtigsten Firefox-AddOns für Webmaster schon etwas geschrieben habe.

    @Tanja Da bin ich ganz deiner Meinung. Am wichtigsten ist, dass alles richtig dargestellt wird. Aber wenn man Darstellungsfehler hat, die man sich nicht erklären kann, sollte man die Seite auf jeden Fall mal validieren. Allein dadurch erledigen sich schon viele Anzeigefehler.

  4. Pingback: Dolomiten
  5. Pingback: Links #60 Image-Faktoren, Gesundheit, Gastartikel und Besucherzähler | NETZ-ONLINE
  6. Ich finde diesen beiden Artikel richtig toll. Empfinde auch die Aufgabe des WC3 als Wächter des guten Tons in den virtuellen Weiten für wichtig. WC3 ist u. a. ein schönes Gegengewicht zum Diktat von Google & Co.

    Aber! Auch wenn ich kein Profi bin, so hinterfrage ich dennoch so manchen zürückgegebene Fehlermeldung des WC3. Meines Erachtens sollte man auch da etwas auf Aktualität der Regularien achten.

    Kann mir jemand folgende Frage beantworten:
    Welcher Browser (auch in älteren Versionen) gibt in welchen Land auch immer einen Fehler beim “&” zurück? Der IE 1.0?

    Werden hier Browser aus dem Jurasic-Park geschützt, oder habe ich da etwas übersehen?

  7. Ich benutze W3C nicht mehr, weil ich die Fehlmeldungen nicht so recht verstehe. Einiges kann man jedoch schon verändern. Ob das Ganze eine Auswirkung auf die Positionierungen hat wage ich allerdings zu bezweifeln. Wichtig ist für mich das die aufgesetzte Site in verschiedenen gängigen Browsern korrekt angezeigt wird.

  8. Guten Tag,
    gibt es so etwas wie den W3C-Validator auch auf deutsch? Ich kann mit den englischen Fehlermeldungen rein gar nichts anfangen!

  9. @Gabi Es gab jahrelang unter validome.org einen Validator mit deutschsprachigen Fehlermeldungen. Seit 3 Jahren ist dieser Dienst aber nicht mehr zu erreichen. Einen anderen deutschsprachigen Validator kenne ich leider nicht.

    Reichen dir die in diesem Artikel veröffentlichten häufigen Fehlermeldungen nicht aus?

  10. @ Cujo: Meine Webseite besteht aus ca. 1500 Einzeldateien. Und ich habe null Ahnung vom Programmieren, weshalb ich auch noch immer mit Adobe Golive 6 arbeite. Was ich eigentlich will: Daß ein Programm mir alle Fehler zeigt und korrigiert, ähnlich wie der HTML-Validator des Firefox. Nur daß der mir in der Korrektur alle Umlaute zu Fragezeichen macht, die Webseite nach links statt wie vorgesehen mittig verschiebt, meine Links blau färbt, ihre Unsichtbarkeit in Sichtbarkeit ändert…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.