HTML-Seite validieren
- Tools zum Finden von Fehlern im HTML-Code

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:
https://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 wir wollen die ersten Gehversuche nicht jedes Mal online stellen müssen. Daher bietet sich der dritte Reiter mit „Validate by direct input“ an:
https://validator.w3.org/#validate_by_input

Beim Reiter „validate by direct input“ können wir per „Copy and Paste“ unseren erstellten HTML-Code hineinkopieren und dann überprüfen lassen. Das „Copy and Paste“ kann per rechtem 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, worauf es achten kann und an welchem Standard wir uns orientiert haben.

Packen wir folgenden HTML-Quellcode in das Tool:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Beispiel HTML-Code überprüfen lassen</title>
</head>
 
<body>
<h1>HTML-Tutorial</h1>
<p>der erste Absatz</p>
</body>
</html>

HTML validieren lassen von validator.w3.org

Nach dem Klick auf den Button „Check“

HTML5 überprüfen lassen und aus Fehlern lernen

Wenn nun der grüne Balken mit „The document was successfully checked as HTML5!“ 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!

Wichtig: Balken rot ist eine Chance zum Lernen

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 – oberste Maxime sollte immer valider HTML-Code sein, damit die Internetseite auf so vielen Geräten wie möglich darstellbar ist, wie z. B. auf dem Handy.

Bei dem HTML-Befehl <font> handelt es sich etwa um einen veralteten („deprecated“) Befehl. Dieser HTML-TAG wurde im Lauf der Zeit vom HTML-Konsortium abgelehnt und wird nun missbilligt, da HTML für Inhalt und Struktur und CSS für das Design zuständig ist. Noch funktioniert er in verschiedenen Browsern, was sich aber in Zukunft ändern kann. Dafür die nächste Aufgabe.

Aufgabe Fehlersuche mit Validator:

Beseitigen Sie in folgendem falschen HTML-Code die Fehler und lassen Sie ihn validieren.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Beispiel HTML-Code Fehler finden</title>
</head>
<body>
 <h1>HTML-Tutorial</h2>
 <Pa>der erste <b>Absatz</p></b>
</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 Zusatzprogramme, sogenannte Add-ons.

Add-ons zum Validieren von HTML-Code

Das Add-On "Html Validator" von Marc Gueury zeigt 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) gehen Sie auf https://addons.mozilla.org/de/firefox/addon/html-validator/.

Sie werden nach der Art des Validierens gefragt. Nehmen Sie 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 haben (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 Beseitigen von Fehlern von oben nach unten arbeiten, ansonsten könnte durch Folgefehler die Suche erfolglos sein. Also erst den obersten Fehler beseitigen und dann wieder validieren lassen und den nächsten Fehler beseitigen. Es kann durchaus sein, dass die 5 angezeigten Fehler daher rühren, dass der erste Fehler die restlichen 4 verursacht.

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 „geschlampt“ 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 das am besten geht, 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!

Weiterer Link zum Validieren