Gültiger Hypertext: Webseiten validieren
Erstellt: 20.04.2004
Geändert: 18.12.2004
Inhalt
Standards nach W3C
Auch beim Schreiben von Webseiten in Hypertext gibt es Regeln.
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:
- Schnellere Ladezeiten
- Bessere Kompatibilität auf verschiedenen Browsern
- Weniger Wartungsaufwand
- Vorteile für die «Zugänglichkeit» («Accessibility») mit verschiedenen Lesegeräten
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: 
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.
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 |
|---|---|
| HTML5 | <!DOCTYPE html> |
| HTML 4.01 «Strict» | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| HTML 4.01 «Transitional» | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| HTML 4.01 «Frameset» | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" |
| XHTML 1.0 «Strict» | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| XHTML 1.0 «Transitional» | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| XHTML 1.0 «Frameset» | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
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: 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: 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: 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:
– oder –
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 – notiert, die Auslassungspunkte (…) falsch mit ….
Beispiel: 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: Validator-Resultate für HTML 4.01 "Strict" nicht valid
Fehler im Beispiel für HTML 4.01 "Strict":
- Zeile 8: Das Attribut «BGCOLOR» ist in dieser HTML-Variante nicht erlaubt.
<body bgcolor="#FFFFFF"> - 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> - Zeile 20: Hier befindet sich das <b>-Start-Tag.
<p><b>Blindheit per Definition</p></b> - Zeile 20: End-Tag für ein «B»-Element, zu dem kein Start-Tag vorhanden ist.
<p><b>Blindheit per Definition</p></b>
- 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>
- 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.
Validator-Resultate für XHTML 1.0 "Strict" nicht valid
Fehler im Beispiel für XHTML 1.0 "Strict":
- 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.. - Zeile 22: Das attribut «target» ist nicht erlaubt.
...><a href="http://validator.w3.org/check/referer" target="_self">Diese Seite - Zeile 26: Der Wert eines Attributs muss in Anführungs- und Schlusszeichen stehen.
<div class=text> - Zeile 27: Das obligatorische Attribut «ALT» fehlt.
<img src="bild.jpg"><p><b>Blindheit per Definition</p></b> - 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> - Zeile 27: Hier befindet sich das <img>-Start-Tag.
<img src="bild.jpg"><p><b>Blindheit per Definition</p></b> - Zeile 28: Das End-Tag </b> für die Fettschrift fehlt.
<img src="bild.jpg"><p><b>Blindheit per Definition</p></b> - Zeile 28: Hier befindet sich das <b>-Start-Tag.
<img src="bild.jpg"><p><b>Blindheit per Definition</p></b> - 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> - Zeile 36: Das End-Tag </p> für diesen Absatz fehlt, was nicht erlaubt ist.
</div> - 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:
- XHTML-Elemente müssen richtig verschachtelt sein.
- XHTML-Dokumente müssen korrekt strukturiert (well-formed) sein.
- Tag-Namen müssen in Kleinbuchstaben geschrieben sein
- Alle XHTML-Elemente müssen geschlossen sein.
Das gilt auch für das Image-Tag <img></img>. Das Tag für eine neue Linie «BR» wird <br /> notiert, ebenso Meta-Tags. - Alle Werte von Attributen müssen in Anführungs- und Schlusszeichen stehen.
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.
Links und Quellen
- DOCTYPE Definition (http://www.fabrice-pascal.de/artikel/dtd/)
- W3C-Dokumente auf Deutsch (http://www.w3.org/2003/03/Translations/byLanguage?language=de)
- The Benefits of Web Standards (http://www.maxdesign.com.au/presentation/benefits/)
Deutsche Übersetzung (http://www.hessendscher.de/benefits/) - HTML Tutorial W3 Schools (http://www.w3schools.com/html/)