Gültiger Hypertext: Webseiten validieren

Von Stefan Bucher
Erstellt: 20.04.2004
Geändert: 18.12.2004

 

Inhalt

 

Standards nach W3C

Auch beim Schreiben von Webseiten in Hypertext gibt es Regeln. HTML kann fehlerfrei oder fehlerhaft aufgesetzt werden. Auch wenn Web-Nutzerinnen und -Nutzer die Fehler nicht entdecken und auch die Browser gutmütig über Patzer hinwegsehen, fehlerhafter Quelltext kann zu Fehlfunktionen führen.

Es ist eine ungeliebte Angewohnheit von vielen Webdesign-Programmen, eigene Sprachelemente in den Code einzufügen, die nicht im offiziellen HTML-Repertoire enthalten sind. Webseiten werden dadurch schwerfällig und für Browser schlecht lesbar.

Über die Reinheit des WWW wacht das World Wide Web Consortium (W3C). Das W3C entwickelt Technologien und schreibt diese als Standards fest. Es gibt Richtlinien heraus und fördert die Weiterentwicklung von neuen Web-Anwendungen.
HTML, XHTML, XML, CSS und SVG sind vom W3C entwickelte Technologien. Webentwicklern wird empfohlen, diese Standards einzuhalten.

Die wichtigsten Vorteile von standards-konformen Webseiten:

Validator

Das W3C bietet Online-Werkzeuge an, die Webseiten auf die Einhaltung der Standards hin überprüfen. Sie sind «Validator» genannt (von Englisch «valid» = «gültig»).

Im Validator kann die URL eines Web-Dokuments angegeben werden, das überprüft werden soll.

Beispiel: Externer Link Internet-Tutorial-Index-Seite im W3C-Validator

Das Beispiel zeigt das Resultat der Prüfung: Die Seite ist gültiges HTML 4.01 Transitional.
Webmaster können auf ihren validen Seiten das offizielle W3C-Logo integrieren und damit zum Ausdruck bringen, dass sie Webstandards unterstützen.

Valid HTML 4.01!

Einen Validator-Service bietet auch SELFHTML an: Validator.de.selfhtml.org.
Der Validator prüft HTML, XHTML, WML und XML. Zur Erläuterung der Fehler verweist er auf die umfangreiche HTML-Referenz von SELFHTML.

DOCTYPE-Angaben

Damit eine Webseite vom Validator als gültig bewertet wird, sind zahlreiche Hürden zu meistern.

Zwingend wird eine Document Type Definition (DTD) verlangt. Diese hängt von der gewählten HTML/XHTML-Version und Variante ab. Die folgende Tabelle zeigt die DOCTYPE-Angaben für die gängigen HTML und XHTML-Varianten.

Version und Variante DOCTYPE
HTML 4.01 «Strict» <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 «Transitional» <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 «Frameset» <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 «Strict» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 «Transitional» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 «Frameset» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Die DOCTYPE-Angabe steht im Quelltext an aller erster Stelle, noch vor dem <html>-Tag. In der DTD ist eine URL enthalten. Sie verweist auf ein Dokument, in dem alle für diese Version und Variante erlaubten Sprachelemente definiert sind. Der Browser ruft vor dem Anzeigen der Webseite die DTD-Datei ab und liest daraus die Regeln für die korrekte Darstellung der HTML-Elemente.

Der W3C-Validator bewertet eine fehlende DOCTYPE-Angabe als Fehler. Ohne DTD versucht der Validator die Seite als HTML 4.01 Transitional zu prüfen. Die angezeigte Meldung lautet «No DOCTYPE Found! Falling Back to HTML 4.01 Transitional».

Beispiel: Externer Link HTML 4.01 ohne DTD

Zeichensatz

Eine zweite zwingende Angabe ist die des verwendeten Zeichensatzes («character encoding»). Der Validator prüft, ob eine solche vorhanden ist. Fehlt die Angabe, wird die Validierung nur «provisorisch» durchgeführt («Tentatively Valid»). Es wird der Hinweis «No Character Encoding Found!» angezeigt.

Beispiel: Externer Link HTML 4.01 ohne Charset META-Tag

Die einfachste und sicherste Art, den Zeichensatz anzugeben, ist mit Hilfe eines META-Tags im HEAD-Bereich des HTML/XHTML-Dokuments. Die entsprechende Zeile sieht so aus:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

Für die Darstellung der Schriftzeichen für die westeuropäischen und amerikanische Sprachen (also auch Deutsch) wird normalerweise der Zeichensatz Latin-1 (ISO-8859-1) angegeben. In diesem Zeichensatz sind alle Buschstaben und Zahlen, Umlaute und einige Sonderzeichen enthalten.
Web-Server und Web-Browser sowie der Validator benötigen diese Angaben, um die Schriftzeichen korrekt zu interpretieren.

Beispiel: Externer Link Umlaute mit charset ISO-8859-1

Das Beispiel zeigt, dass die deutschen Umlaute richtig dargestellt werden, da der Browser auf die Zeichen zurückgreift, die im angegebenen Zeichensatz enthalten sind.

Es gibt Zeichen, die im gewählten Zeichensatz nicht vorkommen. Im Blindtext in unseren Beispielen sind es beispielsweise die Gedankenstriche «–». Damit der Browser diese trotzdem richtig darstellen kann, müssen sie auf eindeutige Weise im Quelltext notiert werden.

Der Gedankenstrich wird wie folgt umschrieben:

&#8211; oder &ndash;

Es handelt sich hier um das numerische (Unicode) und um das benannte Zeichen für den Gedankenstrich.

Eine Liste mit Sonderzeichen und deren Unicode- sowie benannten Notierung finden Sie auf der Website zum Buch «Cascading Stylesheets – Stil mit <Stil>» unter http://www.mediaevent.de/tutorial/sonderzeichen.html.

Vertiefende Informationen finden Sie bei SELFHTML > Zeichen.

Achtung: Nicht erlaubt sind Unicode-Zeichen mit den Werten 128 bis 159. Nun gibt es aber Webdesign-Programme (beispielsweise Macromedias Dreamweaver in der Version 4), die Sonderzeichen mit diesen unerlaubten Zahlenwerten notieren. Der Gedankenstrich wird falsch als &#150; notiert, die Auslassungspunkte (…) falsch mit &#133;.

Beispiel: Externer Link Falsche numerische Sonderzeichen

Der Validator bewertet die Seite zwar als gültig, gibt aber für jedes falsche Zeichen die Warnung «reference to non-SGML character» aus.

Fehleranzeige

Sind in geprüften Dokument Fehler vorhanden, listet der Validator diese der Reihe nach mit Angabe der Zeilennummer im Qelltext auf. Es wird der Regelverstoss erläutert und ein Link zu einer Referenz angegeben.

Die folgenden Beispiele enthalten typische Code-Fehler. Sie sehen, wie der Validator diese anzeigt und welche Erläuterungen angeboten werden.

Beispiel: Externer Link Validator-Resultate für HTML 4.01 "Strict" nicht valid

Fehler im Beispiel für HTML 4.01 "Strict":

  1. Zeile 8: Das Attribut «BGCOLOR» ist in dieser HTML-Variante nicht erlaubt.
    <body bgcolor="#FFFFFF">
  2. Zeile 20: Das End-Tag </b> für die Fettschrift fehlt, was in der «Strict»-Variante nicht erlaubt ist (falsche Verschachtelung).
    <p><b>Blindheit per Definition</p></b>
  3. Zeile 20: Hier befindet sich das <b>-Start-Tag.
    <p><b>Blindheit per Definition</p></b>
  4. Zeile 20: End-Tag für ein «B»-Element, zu dem kein Start-Tag vorhanden ist.
    <p><b>Blindheit per Definition</p></b>
  5. Zeile 29: Das Attribut «BORDER» ist hier in dieser HTML-Variante nicht erlaubt.
    <td><img src="bild.jpg" width="160" height="119" border="0"></td>
  6. Zeile 29: Das obligatorische Attribut «ALT» fehlt.
    …img src="bild.jpg" width="160" height="119" border="0"></td>

Wie Sie im Beispiel auf Zeile 20 sehen können, kann ein einfacher Codierungsfehler drei Errors im Validator nach sich ziehen.
Gerade die korrekte Verschachtelung der HTML-Elemente ist entscheidend. In HTML 4.01 «Transitional» werden diese Fehler noch tolleriert. In XHTML jedoch muss der Code härteren Richtlinien genügen.

Externer Link Validator-Resultate für XHTML 1.0 "Strict" nicht valid

Fehler im Beispiel für XHTML 1.0 "Strict":

  1. Zeile 22: Das Element «H3» ist in der angegebenen Definition nicht enthalten. Achtung: Gros-/Kleinschreibung.
    <H3><a href="http://validator.w3.org/check/referer" target="_self">Diese Sei..
  2. Zeile 22: Das attribut «target» ist nicht erlaubt.
    ...><a href="http://validator.w3.org/check/referer" target="_self">Diese Seite
  3. Zeile 26: Der Wert eines Attributs muss in Anführungs- und Schlusszeichen stehen.
    <div class=text>
  4. Zeile 27: Das obligatorische Attribut «ALT» fehlt.
    <img src="bild.jpg"><p><b>Blindheit per Definition</p></b>
  5. Zeile 27: Das End-Tag </img> für das Bild fehlt, was nicht erlaubt ist.
    <img src="bild.jpg"><p><b>Blindheit per Definition</p></b>
  6. Zeile 27: Hier befindet sich das <img>-Start-Tag.
    <img src="bild.jpg"><p><b>Blindheit per Definition</p></b>
  7. Zeile 28: Das End-Tag </b> für die Fettschrift fehlt.
    <img src="bild.jpg"><p><b>Blindheit per Definition</p></b>
  8. Zeile 28: Hier befindet sich das <b>-Start-Tag.
    <img src="bild.jpg"><p><b>Blindheit per Definition</p></b>
  9. Zeile 28: End-Tag für ein «B»-Element, zu dem kein Start-Tag vorhanden ist.
    <img src="bild.jpg"><p><b>Blindheit per Definition</p></b>
  10. Zeile 36: Das End-Tag </p> für diesen Absatz fehlt, was nicht erlaubt ist.
    </div>
  11. Zeile 35: Hier befindet sich das <p>-Start-Tag.
    <p><b>Text:</b> <a href="http://www.newmediadesigner.de" title="http://www.new

Lehren: Gültiges XHTML

Hier die wichtigsten Unterschiede von XHTML gegenüber HTML:

Wenn Sie sich an diese Grundregeln halten, schreiben Sie meist schon validen XHTML-Code.

Auch wenn Sie lieber beim herkömmlichen HTML bleiben, halten Sie sich an die XHTML-Grundregeln. Der Quellcode Ihrer Webseiten wird dadurch sauberer, kompatibler und bestimmt nicht ungültig.

Wenn Sie es schaffen, vom Validator die Bestätigung «Valid» zu erhalten, können Sie sich ein wenig stolz fühlen. Längst nicht alle Websites schaffen das.
Die Probe aufs Exempel beweisst dies: Wir testen die Homepage von SF DRS im Validator. Das Resultat: «No DOCTYPE Found!»

Links und Quellen