Leider werden Fehler in HTML oder CSS oft nicht im Browser angezeigt.
Die Browser überbügeln viele Fehler d.h. die Browser sind auf den Kompatibilitätsmodus
„Quirks” eingestellt. Und dieser lässt fast jede Sünde des Web-Entwicklers durch.
Der Anzeigemodus wird vom Browser nur geändert (in „
Standardkonformer Modus”)
wenn der HTML-Code korrekt ist.
Fehler in HTML:
Bei einem nicht geschlossenen HTML-Tag wie zum Beispiel:
<p><strong> Text </p>
wird ein nachfolgender Text auch mit
strong (Fett) dargestellt.
Bei einer Tabelle die nicht geschlossen wurde (
</table>) wird nachfolgender Seiten-
inhalt innerhalb der Tabelle angezeigt.
Je nach Browser wird fehlerhafter Code anders interpretiert.
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?
Es gibt Online-Validatoren die den HTML- oder CSS-Code überprüfen.
»
validator.de.selfhtml.org, »
validator.nu, »
jigsaw.w3.org
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.
Erweiterungen
Beim
Mozilla Firefox-Browser kann man die
Fehlerkonsole einschalten diese zeigt
dann JavaScript und CSS-Fehler an.
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 Web-Entwickler bereit.
»
Mehr Erweiterungen für den Firefox
Fehlervermeidung
Ich empfehle jeden Webmaster die Verwendung eines Programmeditors, der über
eine Syntaxhervorhebung für HTML, CSS, PHP und JavaScript verfügt.
Gute Editoren zeigen alle HTML-nativen* Code in einer anderen Farbe an.
Durch die Farbhervorhebung findet man auf diese Art sehr einfach
vergessene Abschluss- Tags oder ausgeklammerten Code.
*
Beispiel: Notepad++ (Bildschirmfoto) »
notepad-plus.sourceforge.net
Weitere Editoren - Hier finden Sie die besten Editoren mit einer kurzen Beschreibung dazu.