HTML-Seite validieren
- Tools zum Fehler im HTML-Code finden

Das validieren von HTML-Seiten ist erfahrungsgemäß beim Lernen von HTML sehr wichtig, damit man als Lernender ein Feedback bekommt. Daher sollte man so oft wie möglich seinen erstellten HTML-Code validieren lassen, damit man sich keine falschen Dinge angewöhnt.

Hier kommt das entsprechende Online-Tool zu finden unter:

http://validator.w3.org/

Hier kann jetzt eine bestehende Internetseite, die bereits Online ist, überprüft werden. Das ist für uns zum Lernen weniger interessant, denn wie wollen die ersten Gehversuche nicht jedes Mal online stellen müssen. Daher bietet sich der dritte Reiter mit „Validate by direct Input“ an.

http://validator.w3.org/#validate_by_input

Beim Reiter „validate by Direct Input“ können wir per „Copy and Paste“ unserer erstellten HTML-Code hineinkopieren und dann überprüfen lassen. Das „Copy and Paste“ kann per rechte Maustaste erfolgen oder einfach per Tastenkürzel (was die schnellste Variante ist). Den HTML-Code markieren und dann die Tastenkombination STRG + C zum kopieren. Im nächsten Schritt dann in das Formularfeld „Enter the Markup to validate“ klicken damit der Cursor dort blinkt und nun die Tastenkombination STRG + V um den Inhalt des zuvor kopierten HTML-Codes einzufügen.

Wichtig ist, dass auch das HTML-Grundgerüst mit dem DOCTYPE vorhanden ist. Durch die Zeile mit dem DOCTYPE weiß das Validierungstool erst, auf was es achten kann und an welchem Standard wir uns orientiert haben.

Packen wir folgenden HTML-Quellcode in das Tool.

<!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">

<head>
  <title>HTML Tutorial – meine erste HTML Seite</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>

<body>

<h1>HTML-Tutorial</h1>

<p>der erster Absatz</p>

</body>
</html>

Validator vom W3C

Nach dem Klick auf den Button „Check“

fehlerloser HTML-Code – Validator hilft Fehler finden

Wenn nun der grüne Balken mit „successfully checked as XHTML 1.0 Strict!“ erscheint, ist alles soweit in Ordnung. Den „1 warning(s)“ ignorieren – weiter unten auf der Seite wird in Englisch erklärt, dass es ein Problem von utf-8 und dem Formular darstellt. Wenn Sie diesen Satz nicht verstanden haben, ist das kein Problem. Es ist wirklich nicht wichtig für den Einstieg!

Aufgabe: Lassen Sie nun den erstellten HTML-Code vom letzten Kapitel mit der Unterstreichung validieren – dies müsste dann wie angekündigt zu einer Fehlermeldung führen.

HTML-Code in Validator bringen

Als Ergebnis erhalten Sie nun folgende Ausgabe:

laut Validator fehlerhaftes HTML

Immer wenn der Balken oben rot ist, ist es wichtig, die Ursache zu finden – ansonsten gewöhnt man sich schnell falsche Techniken an.

Selbst wenn in der Browserausgabe alles in Ordnung aussieht – oberstes Maxim sollte immer valider HTML-Code sein, damit die Internetseite auf so vielen Geräten wie möglich darstellbar ist, wie z.B. auf Handy.

Bei dem HTML-TAG <u> handelt es sich um einen veraltetes („deprecated“) Element. Dieser HTML-TAG wurde im Lauf der Zeit vom HTML-Konsortium abgelehnt und wird nun missbilligt. Noch funktioniert er in verschiedenen Browsern, was sich aber in Zukunft ändern kann.

Aufgabe Fehlersuche mit Validator:

Beseitigen Sie auf folgendem falschen HTML-Code die Fehler und lassen Sie diesen validieren.

<!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">
<head>
  <title>HTML Tutorial – meine erste HTML Seite</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>HTML-Tutorial</h2>
<P>der erster Absatz</p>
</body>
</html>

Schneller HTML-Seiten validieren

Um HTML-Seiten zu erstellen, ist das richtige Werkzeug zum schnellen und präzisen Arbeiten notwendig. Warum hier der Firefox ideal ist, können Sie im Kapitel „Vorteile von Firefox“ nachlesen. Ein großer Vorteil ist das Erweitern des Browsers durch Zusatzprogramm, sogenannte Add-Ons.

Add-ons zum Validieren von HTML-Code

Das Add-On "Html Validator" von Marc Gueury zweigt beim Surfen sofort an, ob Fehler auf einer Seite existieren. Dies funktioniert sowohl Online wie Offline, also beim Entwickeln der eigenen Seiten.

Zum Installieren vom „HTML Validator“ im Firefox (Internet Explorer Nutzer haben hier Pech) können Sie das Add-on von der Seite https://addons.mozilla.org/de/firefox/addon/249 installieren.

Sie werden nach der Art des Validierens gefragt – nehmen die dritte Option: nach beiden Arten validieren.

Nach der Installation und dem Neustart vom Firefox: am rechten unteren Bereich der Fußzeile sehen Sie sofort nach laden einer Webseite, ob diese OK ist (dann grüner Knopf mit Haken) oder ob sich Fehler eingeschlichen habe (roter Knopf). Einfach doppelklick und die Fehler von oben nach unten beseitigen.

HTML Validator im Firefox - Fehler sofort im Blick

Tipp zur Fehlerbeseitigung: Wichtig ist, dass Sie beim Fehlerbeseitigen von oben nach unten arbeiten, ansonsten könnten durch Folgefehler die Suche erfolglos sein. Also erst den obersten Fehler beseitigen und dann wieder validieren lassen und den nächsten Fehler. Es kann durchaus sein, dass die 5 angezeigten Fehler daher rühren, dass durch den ersten Fehler die restlichen 4 resultieren.

Aufgabe: König der HTML-Fehler suchen

Niemals frustrieren lassen! Schauen Sie Ihre sonst so im Internetleben genutzten Seiten an und suchen Sie eine Seite mit mindestens 100 Fehlern. Sie sollen jetzt nicht diese Seite verbessern sondern einfach sehen, dass im Internet viel „geschlampert“ wird. Sehen Sie Ihre Fehler als Möglichkeit zum Lernen. Je öfters Sie Ihre Seiten validieren, desto weniger Fehler werden Ihnen mit der Zeit passieren.

Wichtig ist, sich einen sauberen Stil im Schreiben von HTML anzugewöhnen. Dann schleichen sich weniger Fehler ein und gemachte Fehler findet man schneller. Wie am besten Lesen Sie im folgenden Kapitel.

Lösung

Hier gibt es jeden Tag neue Könige - probieren Sie einfach verschiedene Seiten aus, die Sie oft nutzen. 300-500 Fehler sind keine Seltenheit!

vorheriges Kapitel: Aufgabenlösung
nächstes Kapitel: Sauberer HTML-Code
AufgabenlösungSeitenanfangSauberer HTML-Code
eBook HTML-Seminar.de
del.icio.usMister Wong         AufgabenlösungSeitenanfangSauberer HTML-Code
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de