Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Mit dem Validator zu professionellen Ergebnissen

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Mit dem Validator zu professionellen Ergebnissen

Webseiten sollen funktionieren - möglichst universell. Eine Grundlage dafür bietet sauber geschriebener Quelltext. Der Validator als Werkzeug für die Entwicklung von Webdokumenten unterstützt Webautoren dabei. Matthias Koch zeigt, wie man unkompliziert saubere Ergebnisse erhalten kann.

Wer Webseiten schreibt, hat mit Quelltext zu tun. So ziemlich jede Website besteht aus diesem Quelltext, der Informationen näher beschreibt und für die Interpretation durch ein Programm und die Ausgabe durch ein Gerät auszeichnet. Diese maschinenlesbare Auszeichnung (engl.: Markup) folgt deshalb einer standardisierten formalen Grammatik, deren Einhaltung mit Validatoren überprüft werden kann.

Screenshot des W3C-Validators Validatoren sind Werkzeuge, die Quelltext automatisiert gegenlesen und somit eine Hilfe bei der Fehlervermeidung und  –beseitigung in Webdokumenten darstellen. Ein gültiges Dokument, etwa eine valide Webseite, verschafft Wettbewerbsvorteile, weil die erfolgreich geprüften Texte Entwicklungssicherheit bieten und die Weiterverarbeitung der Daten ermöglichen.

Validatoren leisten diese Arbeit kostenlos und komfortabel:

Nützliche Hinweise und die Benennung von Fehlern hinsichtlich der Standardkonformität werden mit Angabe der Quelltext-Fundstelle ausgegeben. Die Fehlermeldungen sind selbsterklärend und eine Berichtigung des Quelltextes gelingt fast immer unkompliziert.

Beispiel 1

No Character Encoding Found! Falling back to UTF-8.

Es wurde kein Zeichensatz definiert. Deshalb wird vom Validator der Unicode-Zeichensatz verwendet. Wenn die Angabe von charset im <head></head>-Bereich fehlt, kann es zu Anzeigefehlern kommen. In diesem Fall handelt es sich um einen Hinweis und nicht um einen Fehler. Die Zeile <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> würde den Zeichensatz eindeutig festlegen.

Beispiel 2

This page is not Valid (no Doctype found)!

Das Dokument ist ungültig, weil die Art des Dokumentes ist nicht explizit angegeben wurde. Da es unterschiedliche Dokumenttypen gibt und diese definiert sind, dürfen bestimmte Elemente und deren Attribute nur in den vorgesehenen Dokumenten in entsprechender Notation vorkommen. Dazu wird in der ersten Zeile des Quelltextes angegeben, auf welche Deklaration sich das Dokument bezieht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"></html>

Beispiel 3

required attribute "TYPE" not specified.
<script>window.google={kEI:"nRonR5LLFYH0-AK16OC</script>

Die Elemente <script></script> und <style></style> erfordern die Angabe eines Attributs. Wenn es sich um ein Javascript handelt, wird dies auch als solches ausgezeichnet. Der Validator sagt sogar wie: Typical values for type are type="text/css" for "style" and type="text/javascript" for <script></script>. Eine Angabe wie <script language=”javascript”></script> ist ungültig.

Fehlermeldungen und deren Vermeidung

Sämtliche Sonderzeichen sollten maskiert werden. Das gilt auch für Links, in denen Parameter übergeben und diese mit & anhängt werden. Ein & wird somit zu &amp; und die Zeichen < und > müssen, um Probleme beim Parsen zu vermeiden, durch &lt; und &gt; maskiert werden. Auch falsch verschachtelte Elemente sind eine häufige Fehlerursache.

Ein Blick in die entsprechende (X)HTML-Referenz bietet Orientierung für alle, die Webseiten schreiben und daran interessiert sind, dass sie ausgezeichnet funktionieren.

Kommentare

Christian Knothe
am 07.12.2007 - 07:45

Prima Artikel, lediglich in Beispiel 3 scheint etwas schief gegangen zu sein: "Die Elemente und erfordern die Angabe eines Attributs."

Permanenter Link

Jens Grochtdreis
am 07.12.2007 - 08:15

Ich habe den Qualcode korrigiert, jetzt sollten keine Fehldarstellungen mehr da sein.

Permanenter Link

Sven Wagener
am 07.12.2007 - 12:21

Im übrgigen gibt es ja da auch nocht den W3C CSS Validator:

http://jigsaw.w3.org/css-validator/

Permanenter Link

Jan
am 07.12.2007 - 12:58

Sehr praktisch ist auch das Firefox Plugin "HTML VALIDATOR". Es untersucht die Seiten sozusagen "Live", während des Surfens.

http://users.skynet.be/mgueury/mozilla/

Permanenter Link

Fritz
am 07.12.2007 - 15:58

Man kann übrigens alle im Beitrag genannten Validatoren in die Firefox Web Developer Extension integrieren, und damit ist jeder Validator nur noch den sprichwörtlichen Mausklick entfernt.
Eine ausführliche Anleitung dafür gibt es im Validome Forum

Permanenter Link

Thomas S
am 07.12.2007 - 18:13

Zum Validieren meiner XHTML-Seiten verwende ich immer den XML Schema Validator auf http://schneegans.de/sv/ - der ist viel genauer als die anderen Validatoren. Geht aber natürlich nicht für HTML-Quelltexte.

Permanenter Link
Matthias Koch

Matthias Koch (Autor)
am 07.12.2007 - 19:38

@Christian Knothe, Jens Grochtdreis
Ich habe auch festgestellt, dass einige technische Fehler aufgetreten sind - viele CMS bieten bei der Texteingabe die Möglichkeit, Markup im HTML-Modus einzufügen. So können diese Probleme vermieden werden. Auch der Wordpress-Befehl "Tags schließen" ist manchmal mit Vorsicht zu genießen... Danke, Jens.

@Sven Wagner
Stimmt. Bevor jedoch die Formatierung (CSS) überprüft wird, ist es aber sinnvoll, das Markup gegenlesen zu lassen.

@Jan, Fritz
Die Web Developer Toolbar für Firefox Browser von Chris Pederick ermöglicht das komfortabel. Allerdings bietret Opera Browser standardmäßig die Überprüfung von Quelltext geöffneter Webseiten mit dem W3C-Markup Validation Service an: Einfach mit der rechten Maustaste auf die Seite klicken und im Kontextmenü den Eintrag "Überprüfen" auswählen.

@Thomas S.
Validatoren sind Programme und keine Menschen. Die barrierearme Umsetzung von Internetauftritten kann mit Validatoren alleine nicht überprüft werden.

Permanenter Link

Lemix
am 08.12.2007 - 13:55

Hallo Matthias,
danke für die Informationen. Bei meinem Blog werden z.B. zu oft "IDs" verwendet, dafür müsste ich ja dann Klassen benutzen, oder?
Ich werde es mal ausprobieren und versuchen, es valide zu machen :)

Permanenter Link

Matthias Koch
am 09.12.2007 - 02:40

@Lemix
Eine id ist ein einzigartiger Bezeichner (mit hoher Priorität). Er dient der eindeutigen Identifizierung eines Elements (z.B. ein Anker in einem HTML-Dokument). Die class wird für die Klassifizierung von Elementen mit bestimmten gleichen Merkmalen verwendet.
Der Validator wird darauf hinweisen, wenn er die selbe ID mehr als ein Mal in deinem Blog-Quelltext vorfindet, weil die Eindeutigkeit so nicht mehr gegeben ist. Klassen können beliebig viele Elemente beinhalten und auch mehrmals in einem Dokument vorkommen.

Permanenter Link

Matthias
am 10.12.2007 - 01:51

nochmal @Thomas S
Tut mir leid für die unpassende Antwort, ich habe es erst jetzt bemerkt - mein Fehler.
Das Semikolon in Bsp. 2 mit der DTD habe ich jedoch nicht gesetzt, es gehört dort natürlich nicht hin.

Permanenter Link

dave
am 10.12.2007 - 06:52

Was mich mal interessiert:

Dokumente, die auf Webstandards basieren bieten klar Vorteile, aber Validität auch? Was ich meine ist, ein als valide ausgezeichnetes Dokument bringt doch im Endeffekt keinen großen Vorteil gegenüber einem mit Webstandards gebauten Dokument, das aber durch 1-2 Fehler nicht valide ist. Ist dem so?

Dann sollte man man schon manchmal abwägen, was einem mehr bringt.. Validität auf Kosten von Zeit und evtl. sogar einigen "Funktionen" oder einem Webstandard basiertem Dokument mit möglichen kleinen Fehlern (solange die Darstellung konsistent ist) - zumindest solange Validität keinen richtigen Vorteil bringt.

Permanenter Link

Eric Eggert
am 10.12.2007 - 09:16

dave: Die Fehlerkorrektur in Browsern ist eine Sache der Implementation, nicht der Webstandards. So kann in Browsern folgender Fehler unterschiedlich korrigiert werden:

<em><strong>Dies ist ein Text.</em></strong>

Daraus wird nach dem Laden in den Browser entweder:

<em></em><strong>Dies ist ein Text.</strong>

oder

<em><strong>Dies ist ein Text.</strong></em>

oder irgendetwas anderes. Natürlich kannst du in mehreren Browsern überprüfen, ob sie den Fehler gleich ausbügeln, aber eine kleine Änderung im Rendering und dein fehlerhaftes Dokument sieht eben nicht so aus wie du dir das vorstellst.

Nur durch eine valide Seite nimmst du dem Browser beim Rendering von HTML den Spielraum deinen Code interpretieren zu müssen.

Permanenter Link

Konstantin
am 10.12.2007 - 10:37

Vielen Dank für die guten Tipps! Auch ich nutze den Validator häufig und muss feststellen, dass er noch immer viele Fehler findet und diese auch in unterschiedlichen Browsern deutlich werden.

Permanenter Link
David Maciejewski

David Maciejewski (Webkraut)
am 10.12.2007 - 14:54

Was ich immer empfehle: Man sollte immer den obersten Fehler im Validator beseitigen. Dann kann es unter Umständen sein, dass sich der Rest von selbst ergibt.

Permanenter Link

thomas
am 11.12.2007 - 10:36

@Jan,
Supi der Tip mit dem Plugin "HTML VALIDATOR"!
Nun ist es "noch ein Klick weniger", STÄNDIG beim coden SOFORT nach Fehlern zu gucken.

Gruß thomas

Permanenter Link

Achim H
am 12.12.2007 - 13:21

@dave (Antwort zu Beitrag 11)

Jeder vorhandene Fehler kann von verschiedenen Browser verschieden interpretiert bzw. durch die eigenen Fehlerkorrekturroutinen doch noch korrekt dargestellt werden. Will man sicherstellen, dass alle Browser ihr Bestmöglichstes dazu beitragen, muss das Dokument den Standards zu 100% entsprechen.

Grundvoraussetzung für eine korrekte Darstellung ist also, dass die Ressource fehlerfrei erstellt wurde. Nur durch ein valides Dokument kann man wirklich sicherstellen, dass die Inhalte unter bestmöglichen Aspekten auch korrekt dargestellt würden. In wieweit die Browser dazu effektiv in der Lage sind, steht leider auf einem anderen Blatt.

mfg Achim

Permanenter Link

Matthias Koch
am 14.12.2007 - 01:14

Ein Validator und die damit vorhandene Chance, eine Kodierung auf Gültigkeit hin zu evaluieren, wird häufig missverstanden. Manche, die im Schreiben von empfohlenem und damit formal sauber erstellten Webdokumenten erhebliche Defizite haben, erleben das Vorhandensein von formalen Konventionen (z. B. die Empfehlungen und Hinweise des internationalen W3-Konsortiums) als "Bevormundung", "Zeitverschwendung" oder "Krücke" (Einschränkung).

Sie haben leider noch nicht verinnerlicht, dass ein Überprüfungswerkzeug (Validator) eine Unterstützung (wie eine Gehhilfe) bei der Entwicklung von Webinhalten ist. Eben durch das Gegenlesen können Zeit und Kosten gespart werden. Denn ähnlich wie bei einer Rechtschreibprüfung bekommt der Webautor Informationen über die Verletzung von deklarierten und semi-verbindlichen Regeln, damit das Endergebnis lesbar, vertretbar und vorzeigbar ist - und Sicherheit bietet.

Ein Validator-Werkzeug dient nicht dem "Abstrafen", sondern auch dem Nachweis der Qualifikation des Webautors und seiner Handlungskompetenz.

Valider Code ist eine Basis für sichere Fortentwicklung im Internet. Die Einhaltung der standardisierten Übereinkunft (Webstandards des W3C), die benötigt werden, weil mit der Nutzung des Internet multifaktorale Bedingungen vorherrschen (z. B. unerschiedliche Browser, Betriebssysteme, individuelle Einstellungen der Geräte etc.), setzt sich seit Jahren immer mehr durch - international, aber auch im deutschsprachigen Netz.

Übrigens: Wer häufig validiert und ggf. die Fehlerchen ausbessert, schreibt zunehmend sicherer und benötigt den Validator meist nur noch kurz vor der Übergabe an und Abnahme durch den Auftraggeber.

Für Entscheider und an Webdesign Interessierte kann der Validator auch ein intelligentes Hilfsmittel sein, die Versprechungen bei Anbietern im Webdesign- und Werbebereich hinsichtlich Webstandards zu testen und das große Angebot nach Glaubhaftigkeit ("können die wirklich valide?") zu filtern.

Permanenter Link

Achim H
am 14.12.2007 - 03:08

Ich sehe das ähnlich wie Matthias.
Durch das Validieren wird man tatsächlich besser, weil mal weniger häufig das aufgezählt bekommt, was im Quelltext (oder CSS) falsch ist. Irgendwann hat man das verinnerlicht und macht diese Fehler nicht mehr. Man bewegt sich also viel weiter in die Standards hinein. Und das ist keinesfalls ein Manko, sondern zeigt, dass der Webschreiberling sich bei dem Dokument Mühe gegeben hat und für ihn eine Webseite keinesfalls nur ein 0815-Projekt ist, das man mal eben so zusammenklatscht bzw. -klickt.

Persönlich validiere ich jede Seite. Auch dann, wenn ich dafür 10 Minuten meiner eigenen Zeit opfern müsste.

mfg Achim

Permanenter Link

Ralph
am 14.04.2008 - 21:33

Für mich gehört es Standardmässig dazu, sauberen Quelltext zu schreiben. Schönes Wortspiel ;)

Ralph

Permanenter Link

Die Kommentare sind geschlossen.