Tipp 1: Fehlerfreier Code

Dies ist nun also Teil 1 unserer Artikelreihe »10 Tipps für eine perfekte Webseite«. Im Rahmen dieser Reihe wollen wir einen kleinen Einblick geben, was nötig ist, um eine professionelle Webseite zu erstellen, und woran man eine gute Seite erkennt. Ein Blick hinter die Fassade kann sich immer lohnen, vor allem wenn man beurteilen möchte, ob Preis und Leistung der eigenen Seite stimmen. Hierbei wollen wir den Fokus vor allem auf den Code der Seiten selbst, also den (X)HTML-Code legen. Schließlich wird das was Sie sehen, durch diesen Code erzeugt. Lassen Sie uns schauen, wie aus einer einfachen Webseite die perfekte Webseite wird.

Warum ist fehlerfreier Code so wichtig?

Der Code einer Webseite, also eines einzelnen Dokumentes, das aus dem Netz abgerufen und im Browser zur Anzeige gebracht wird, kann mitunter sehr komplex sein. Genau hier beginnen die Probleme. Leider werden auch Webseiten von einem Browser zur Anzeige gebracht, die genaugenommen gar nicht anzeigefähig sind, weil sie nämlich gegenüber der Definition von (X)HTML fehlerhaft sind. In »richtigen Programmiersprachen« wird beim Auftreten fehlerhafter Anweisungen die weitere Verarbeitung abgebrochen. Dies macht auch Sinn, da durch die falsche Verwendung von Anweisungen das Programm evtl. aber sogar der Rechner zum Absturz gebracht werden kann.

Im Browser sind die Folgen nicht derart dramatisch, denn jeder Browser ist gewissermaßen gutmütig, und verzeiht den einen oder anderen Fehler. Darüber hinaus handelt es sich bei HTML-Code nicht um ausführbaren Code, der direkt im Prozessor des Rechners ausgeführt sondern vom Browser interpretiert wird. Leider verhalten sich alle Browser unterschiedlich, und somit kann die Anzeige entsprechend stark variieren. Vor allem dann, wenn fehlerhafter Code verhindert, dass der Browser diesen korrekt interpretieren kann. Er wird Annahmen treffen, und versuchen, doch noch ein Ergebnis zustande zu bringen. Eines aber ist sicher, den Erwartungen wird dieses Ergebnis mit großer Wahrscheinlichkeit nicht entsprechen.

Was bedeutet »fehlerfrei«

Die Definition von »fehlerfrei« ist komplex, jedoch im Bezug auf die syntaktische Fehlerfreiheit von Code eher einfach.

Das bedeutet also, dass der Code einer Webseite dann fehlerfrei (valide) ist, wenn er ausnahmslos die Regeln, wie sie in der HTML-Spezifikation des W3C definiert sind, einhält. Leider aber gibt es an dieser Stelle zwei Probleme. Erstens, auch wenn der HTML-Code einer Webseite valide ist, so kann es doch vorkommen, dass das Ergebnis im Browser mangelhaft aussieht, es zu Anzeigefehlern kommt. Dies hat den Grund, dass es noch immer einige Browser mit der Standardkonformität nicht so genau nehmen. Zweitens, Browser melden die Fehler im Code nicht an den Benutzer.

Zumindest für den zweiten Fall gibt es allerdings Abhilfe. HTML-Validator, ein Plugin für den Firefox-Browser, ermöglicht es, auf den ersten Blick zu erkennen, ob die vorliegende Seite fehlerfrei im Sinne der HTML-Spezifikation ist. Darüber hinaus kann aber auch ein Online-Tool des W3C verwendet werden, um eine bestimmte Seite auf Fehlerfreiheit zu überprüfen. Mit diesem Link überprüfen Sie zum Beispiel diese Seite auf Fehler.

Die häufigsten Fehler, in Bezug auf korrekten Code

Woran erkennt man, ob der HTML-Code fehlerfrei (valide) ist?

Ausgelassenen Elemente

Je nach verwendetem DOCTYPE, ist die Verwendung bestimmter HTML-Elemente zwingend vorgeschrieben. Zu Dieser Gruppe von Elementen gehören DocType-übergreifend die Wurzelelemente html, head und body. Ein Dokument ohne diese Elemente wird zwar noch immer zu einer Anzeige führen, ist aber keinesfalls korrekt. Hierbei ist es nur der Gutmütigkeit des jeweiligen Browsers zu verdanken, dass etwas angezeigt wird. Dazu zählt auch das Element title, welches zum Beispiel in den XHTML-Varianten zwingend vorgeschrieben ist. Natürlich macht dieses Element auch bei der Verwendung eines anderen DOCTYPEs Sinn, da der Inhalt dieses Elementes in der Titelzeile des Browsers angezeigt wird, sowie von Suchmaschinen zur Bewertung des Inhaltes einer Seite herangezogen wird.

Merke: Zu fehlerfreiem Code gehört immer, die zwingend erforderlichen (X)HTML-Elemente (in der vorgesehenen Weise) zu verwenden. Eine gute Referenz zu den exitierenden HTML-Elementen und deren Verwendung ist unter SELFHTML zu finden.

Fehlende schließende Tags

Zu jedem öffnenden Tag gehört ein schließendes Tag. Dabei spielt der DOCTYPE keine Rolle. Ausnahmen machen an dieser Stelle jedoch wieder die verschiedenen Browser, deren Hang zur Gutmütigkeit bei der Interpretierung des Codes, schon einmal ermöglicht, den ein oder anderen schließenden Tag unter den Tisch fallen zu lassen. Dies führt oft jedoch wieder zu Problemen. Vor allem dann, wenn Folgefehler durch das Weglassen von schließenden Tags provoziert werden. Ab einem gewissen Punkt kann der Browser den Code nicht mehr korrekt interpretieren.

Merke:
Zu jedem öffnenden Tag gehört schließendes Tag. IMMER!

Verschachtelungsfehler

Ein Browser stellt eine Webseite dar, indem er die in der Adresszeile angegebene Datei vom Server abruft, und den Inhalt der Datei interpretiert. Hierbei folgt er gewissen Regeln, die durch die Sprachdefinition von (X)HTML vorgegeben sind. In der Sprachdefinition ist ebenfalls vorgegeben, welche Elemente innerhalb welcher Elemente verwendet werden dürfen. Verschachtelungsfehler entstehen dann, wenn entweder nicht zulässige Elemente innerhalb anderer Elemente verwendet werden, dies aber laut Sprachdefinition nicht erlaubt ist. Vor allem aber die Nichteinhaltung der Reihenfolge von öffnenden und schließenden Elementen führt dazu, dass die Anzeige des Browsers nicht dem entspricht, was erwartet wird. Hier ein Beispiel:

Falsche Verwendung von Attributen

Attribute von HTML-Elementen dienen dazu, ein Element näher zu beschreiben, und mit weiteren Eigenschaften zu versehen. Welche Attribute mit welchem Element verwendet werden dürfen ist Teil der Spezifikation. Genau diese Spezifikation beschreibt auch, wie diese Attribute korrekt verwendet werden.

Merke:
Jedes Attribut muss in Hochkommata(") angegeben werden! Attribute dürfen nur dort verwendet werden, wo sie laut Spezifikation vorgesehen sind.

Fehlendes DOCTYPE

Die DOCTYPE-Definition gibt in jedem Dokument an, nach welchem Teil der (X)HTML-Spezifikation sich das vorliegende Dokument richtet. Diese Angabe verwendet der Browser, um zu bestimmen, welcher Anzeigemodus verwendet wird. Fehlt die DOCTYPE-Deklaration, nimmt der Browser an es handele sich um die Standard-Defintion. Auch hier kann es so wieder zu ungewünschten Effekten bei der Anzeige kommen. Es empfiehlt sich also, die Deklaration des verwendeten DOCTYPE in jedes Dokument einzufügen.

Genau um dieses Thema geht es im nächten Artikel dieser Reihe:

Tipp 2: Kein Dokument ohne DOCTYPE!