Fehler im HTML- und CSS-Quelltext erkennen und validieren

Leider werden Fehler in HTML oder CSS oft nicht im Browser angezeigt. Die Browser überbügeln viele Fehler d.h. die Browser wechseln automatisch in den KompatibilitätsmodusQuirks” und dieser lässt fast jede Sünde des Webmasters durch. Der Anzeigemodus wird vom Browser nur geändert, in „Standardkonformer Modus”, wenn der HTML-Quelltext korrekt ist.

[Bildschirmfoto] 
Anzeige der Seiteninformationen im Mozilla Firefox-Browser
Anzeige der Seiteninformationen im Mozilla Firefox-Browser

Fehler in HTML

Bei einem nicht geschlossenen HTML-Element wie zum Beispiel: <p><strong> Text </p> wird ein nachfolgender Text auch Fett (strong) dargestellt. Bei einer Tabelle die nicht geschlossen wurde (</table>) wird nachfolgender Seiteninhalt innerhalb der Tabelle angezeigt. Je nach Browser wird fehlerhafter Quelltext anders interpretiert.
Am einfachsten ist es beim schreiben geöffnete Tags gleich wieder zu schließen.

Fehler in CSS

Hier sind es meistens Schreibfehler oder Anweisungsfehler.
Beispiele: color: 000000; hier wurde das Raute-Zeichen (#) vergessen.
backround-color: #000000; enthält einen Schreibfehler (background).
vertical-align: center; enthält einen Anweisungsfehler (center gibt es bei vertical-align nicht).

Welche Möglichkeiten hat man denn um solche Fehler anzuzeigen?

Die drei großen Browser (Microsoft Edge, Mozilla Firefox und Google Chrome) stellen Werkzeuge für Webmaster bereit. Dazu drücken Sie die Taste F12, es erscheinen dann die Entwicklertools.

Es gibt Online-Validatoren die den HTML- oder CSS-Quelltext überprüfen:
validator.nu, jigsaw.w3.org oder CSS Validation Service

Viele Meldungen von HTML oder CSS -Validatoren sind auch nur Folgefehler. Oft lohnt es sich die Liste der angezeigten Fehler von oben nach unten abzuarbeiten.

Siehe dazu auch: Quelltext mit Format

Erweiterungen

Für HTML-Fehler gibt es die Erweiterung HTML Tidy (HTML Validator).
Nützlich ist auch die Erweiterung Web Developer diese stellt eine Symbolleiste und ein Menü mit zahlreichen nützlichen Werkzeugen für Webmaster bereit.

Fehlervermeidung

Ich empfehle jeden Webmaster die Verwendung eines Programmeditors, der über das hervorheben von Schlüsselwörtern für HTML, CSS, PHP und JavaScript verfügt.

Gute Editoren zeigen den Quelltext in einer anderen Farbe an. Durch die Hervorhebung mit Farbe findet man auf diese Art sehr einfach vergessene Abschluss- Tags oder ausgeklammerten Quelltext.

Notepad++ notepad-plus.sourceforge.net (kostenlos)

Häufige Fehler in HTML

Zu viele Zeilenumbrüche

Zwingen Sie den Fließtext nicht durch einen Zeilenumbruch (<br>-Tag). Verwenden Sie Zeilenumbrüche nur wo es unbedingt notwendig ist.

Falsch:

<p>Weit hinten, hinter den Wortbergen, <br>
fern der Länder Vokalien und Konsonantien leben <br>
die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen <br>
an der Küste des Semantik, eines großen Sprachozeans.</p>

Richtig:

<p>Weit hinten, hinter den Wortbergen, 
fern der Länder Vokalien und Konsonantien leben 
die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen 
an der Küste des Semantik, eines großen Sprachozeans.</p>

Falsch:

<p>Weit hinten, hinter den Wortbergen, 
fern der Länder Vokalien und Konsonantien leben die Blindtexte.<br><br>
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, 
eines großen Sprachozeans.</p>

Richtig:

<p>Weit hinten, hinter den Wortbergen, 
fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>
<p>Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, 
eines großen Sprachozeans.</p>

Schriftfarbe, Schriftgröße ohne den Font-Tag

Der <font>-Tag gilt mittlerweile als veraltet und sollte nicht mehr eingesetzt werden.

Falsch:

<p>Weit hinten, hinter den <font size="3" color="red">Wortbergen</font> ...</p>

Richtig:

<p>Weit hinten, hinter den <span style="font-size:16px; color:red;">Wortbergen</span> ...</p>

Attribute in Anführungszeichen

Setzen Sie Attribute immer in Anführungszeichen ("), so vermeiden Sie Fehler bei HTML, CSS-Anweisungen oder JavaScript. Sie können dazu auch einfache Anführungszeichen (') verwenden.

Falsch:

<input type=text name=eingabe style=color:red onclick=alert('Hallo')>

Richtig:

<input type="text" name='eingabe' style="color:red" onclick="alert('Hallo')">

Wenn Attribute keine weiteren Werte benötigen (Bsp.: selected, checked) sollte der Name des Attributs eingefügt werden (Bsp.: selected="selected", checked="checked").

Formularfelder

Verwenden Sie das Platzhalter-Attribut placeholder (HTML 5) nicht statt eines <label>-Elements. Ihre Zwecke sind unterschiedlich: das <label>-Element beschreibt die Rolle des Form-Elements; Das heißt, es gibt an, welche Art von Informationen erwartet wird, das Platzhalter-Attribut ist ein Hinweis wie das Format des Inhalts sein sollte.

Falsch:

<input type="text" placeholder="Name">

Richtig:

<label>Name: <input type="text" placeholder="Vorname, Nachname"></label>

DIV-Suppe

Mit den neuen HTML 5 - Elementen (<header>, <nav>, <article>, <footer>, …) können Sie die Seite strukturiert aufbauen, Bereiche die früher mit zahlreichen <div>-Tags gemacht wurden, lassen sich nun über HTML 5 gestalten.

Falsch:

<div id="kopf"> website.xy </div>
<div id="nav"> Link 1, Link 2, Link 3 </div>
<div id="artikel"> Viel Text ... </div>
<div id="fuss"> Copyright </div>

Richtig:

<header> website.xy </header>
<nav> Link 1, Link 2, Link 3 </nav>
<article> Viel Text ... </article>
<footer> Copyright </footer>

Bilder

Falsch:

<img src="bild.gif">
<img src="bild.gif" alt="bild.gif">

Richtig:

<img src="bild.gif" width="50" height="40" alt="Ein kleines Bild">