Tipp 3: Das HTML-Codegerüst

Der vorherige Beitrag aus unserer Reihe »10 Tipps für eine perfekte Webseite« hat sich damit befasst, wofür ein DOCTYPE verwendet wird, und warum dieser so wichtig ist. In diesem Artikel soll nun eine komplette Vorlage zur Erstellung einer perfekten Webseite entwickelt werden, das (X)HTML-Code-Gerüst!

Nach der Deklaration des DOCTYPE folgen nun eine ganze Reihe von Angaben und Definitionen, die für den korrekten Aufbau einer Webseite benötigt werden. Einige dieser Angabe sind zwar optional, erfüllen aber dennoch eine wichtige Aufgabe, wenn es darum geht, das Optimum mit einer Webseite zu erreichen. Diese Angaben können Meta-Daten sein, die es den Suchmaschinen erlauben (oder eben auch nicht), die vorliegende Seite zu indexieren, Snippets im Suchergebnis anzuzeigen, …

Welche Elemente des Codes einer Webseite zwingend erforderlich sind, welche Elemente zum guten Stil gehören und welche Elemente einen darüber hinausgehenden Zweck erfüllen, wollen wir in Teil 3 unserer Artikelreihe »10 Tipps für eine perfekte Webseite« vorstellen.

Das Minimum

Die Auszeichnungssprache HTML basiert im Kern auf der Verwendung von sogenannten Tags. Dieses Tags sind es, aus denen die Struktur einer Webseite erzeugt wird, und deren Zweck es ist, die enthaltenen Informationen zu strukturieren. Zwar ist es möglich, mittels HTML den enthaltenen Informationen ein Aussehen zuzuweisen, jedoch ist dies KEIN guter Stil, und erschwert die Entwicklung und die Wartung einer Webseite zum Teil erheblich.

Exkurs

In der Informatik allgemein ist es üblich, jedem Teil eines Ganzen nur eine Verantwortlichkeit zu übertragen UND doppelten Code zu vermeiden. Der Sinn ist einleuchtend. Wird doppelter Code verwendet, so kann sich die Fehlersuche in der Hinsicht erschweren, dass ein und derselbe Fehler an vielen Stellen im Code vorhanden sein kann. Wird nun eine Änderung gemacht, muss diese zwangsläufig an vielen Stellen gemacht werden. Wird nur ein Vorkommen vergessen oder übersehen, so kommt es zu schwer behebbaren Fehlern. Ebenso verhält es mit den Verantwortlichkeiten. Wird ein Teil eines Ganzen mit mehreren Verantwortlichkeiten ausgestattet, so kann es sein, dass nicht genau festgestellt werden kann, welcher Code nun welches Ergebnis erzeugt. Auch dies erschwert wieder die Fehlersuche.

Teil 4 der Artikelreihe »10 Tipps für eine perfekte Webseite« wird sich genau damit befassen. Der Trennung zwischen Inhalt und Darstellung. Durch diesen Ansatz sollen die eben genannten Probleme vermieden werden.

Aber zurück zum Thema. (X)HTML wird verwendet, um die Struktur einer Seite zu definieren, die Inhalte logisch auszuzeichnen und für den Browser verwertbar zu machen. Und genau das ist der Zweck von HTML. Informationen so zu verpacken, dass Browser die enthaltenen Informationen verarbeiten können.

Der Aufbau

Schematisch besteht ein (X)HTML-Dokument aus zwei übergeordneten Bereichen:

• Allgemeine (Verarbeitungs-) Informationen
• (X)HTML-Code

Allgemeine (Verarbeitungs-) Informationen

Dieser Bereich steht immer am Beginn einer (X)HTML-Datei und enthält maximal zwei Blöcke an Information.

Für den Fall, das XHTML als DOCTYPE verwendet wird, beginnt die Datei mit

Diese Zeile teilt dem Browser mit, dass das vorliegende Dokument nach den Regeln von XML (Version 1.0) aufgebaut ist. Die verwendete Zeichenkodierung ist UTF-8. Diese Zeichenkodierung definiert, welche Kodierung dem Dokument selbst zugrunde liegt, nicht die Zeichenkodierung des Inhaltes des Dokumentes. Zu dem besagt diese Zeile, dass das vorliegende Dokument gültig (valide) gemäß der Spezifikation von XML sein muss, denn es handelt sich ja um ein XML_Dokument. Hierbei ist speziell auf korrekte Verschachtelung der HTML-Elemente zu achten sowie der Regel, dass zu jedem öffnenden auch schließendes Tag gehört.

Danach folgt der DOCTYPE.
Welchen DOCTYPE Sie verwenden, richtet sich nach den technischen Gegebenheiten sowie den eigenen Vorgaben. Eine ausführliche Beschreibung darüber, wie DOCTYPEs verwendet werden, finden Sie in Teil 2 unserer Artikelreihe »10 Tipps für eine perfekte Webseite«.

Beispiel:

(X)HTML-Code

Im Code-Bereich des Dokumentes werden nun die eigentlichen Inhalte angegeben und ausgezeichnet. Alles, was hier notiert wird, muss nun den Regeln von HTML bzw. XHTML gehorchen. Hierbei gibt es sehr wohl Unterschiede. Einige der wichtigsten Unterschiede seien hier kurz erläutert.

Je nachdem, welcher DOCTYPE verwendet wird, muss das vorliegende Dokument verschiedenen Regeln gehorchen. Im Falle von XHTML sind dies die folgenden:

• alle Tags werden immer klein geschrieben
• die Angabe des Namensraumes (Namespace) im html-Tag ist zwingend erforderlich
• Jedes Tag muss geschlossen werden. Bei Tags, die sowohl ein öffnendes wie auch ein schließendes Tag besitzen, darf der schließende Tag nicht ausgelassen werden. Tags wie img, hr, br, … müssen immer wie folgt geschlossen werden: <img />, <hr />, <br />
• Manche Tags sind für ein Dokument zwingend. So vor allem html, head, body, title

HTML-Dokumente können, sollten aber nicht, lockerer gestaltet sein.

• Keine Unterscheidung darin, ob Tags groß oder klein notiert werden
• Keine Deklaration des Namesraumes (Namespace), denn HTML-Dokumente besitzen ihren eigenen impliziten Namensraum, der nicht explizit angegeben werden muss.
• Einige Tags kommen ohne schließende Tags aus (z.B.: <p>). Dies bedeutet jedoch nicht, dass die korrekter Code ist. Die meisten Browser unterstützen aber diese Art Code.

Das Code-Gerüst

Folgende Code-Gerüste geben das Minimum dessen an, was für ein Dokument auf Basis von HTML oder XHTML zwingend erforderlich ist.

Eine Anmerkung hierzu.

Es sei erwähnt, dass durch die Browser nicht geprüft wird, ob die vorliegenden Dokumente korrekt im Sinne der Spezifikation sind. Es werden also auch Dokumente zur Anzeige gebracht, die nicht valide oder konform zur Spezifikation sind. Das bedeutet jedoch nicht, dass es eine gute Idee ist, nicht gültige oder wenigstens korrekte Dokumente zu erstellen. Je nach Browser kann es zu gravierenden Anzeigeunterschieden kommen, wenn der Code nicht korrekt ist.

HTML

XHTML

Wichtige Ergänzungen

Einige wichtige Ergänzungen, die im Kopfbereich (head) der Webseite notiert werden, sollen hier genannt werden. Alle Angabe sind in XHTML-Notation.

Zeichenkodierung des Inhaltes

Entgegen der Angabe der Zeichenkodierung für das vorliegende Dokument im XML-Header bezieht sich diese Angabe darauf, welche Zeichenkodierung für den Inhalt der Webseite verwendet wird. Fehlt diese Angabe, kann es zu Anzeigefehlern kommen, da der Browser fälschlicher Weise eine falsche Zeichnkodierung voraussetzt. Gut zu beobachten ist dieses Phänomen, wenn eine Webseite auf einem Macintosh und einem PC betrachtet wird. Fehlt diese Angabe, setzt der Macintosh Unicode voraus, und kann z.B. Umlaute nicht darstellen. Daher: immer angeben, welcher Zeichkodierung der Inhalt eines Dokumentes folgt.

Schlüsselwörter (Keywords)

Angabe der relavanten Schlüsselwörter (Keywords) des aktuellen Dokumentes. Wichtig: Nur Schlüsselwörter verwenden, die auch tatsächlich im Text vorkommen. Suchmaschinen bewerten es unter Umständen negativ, wenn Keywords verwendet werden, die nicht im Text vorhanden sind.

Seitenbeschreibung (Description)

Kurze Beschreibung des Inhalts der Seite. Dies kann von Suchmaschinen verwendet werden, um im Suchergebnis anzuzeigen, welchen Inhalt der Besucher zu erwarten hat.

Indexierung

Verwenden Sie diesen Tag, um dem Crawler der Suchmaschinen mitzuteilen, ob das vorliegende Dokumente indexiert werden soll. Dieses Beispiel erlaubt der Suchmaschine die vorliegende Seite in den Index aufzunehmen UND den enthaltenen Links zu folgen.

Das komplette Gerüst

Und nun, zu guter Letzt das komplette Code-Gerüst.

Abschließendes

Natürlich kann es sinnvoll sein, das hier vorgestellte Gerüst um weitere Angaben zu erweitern. Dies richtet sich vor allem danach, welcher Ausrichtung die Seite folgt. Vor allem in Richtung Suchmaschinen und einer dahin gehenden Optimierung können weitere Elemente hinzukommen. Die Bedeutung dieser Elemente mag ebenso gewichtig sein, wie die der bisher genannten. Eine eingehende Erläuterung in Rahmen dieses Artikels ist jedoch nicht möglich.

Noch ein Tipp

Bemühen Sie sich, stets valide und (syntaktisch) korrekte Dokumente zu erstellen und an den Client zu liefern. Vor allem die Konsistenz in der Anzeige, die Verarbeitungsgeschwindigkeit und nicht zuletzt die Qualität Ihres Produktes werden es Ihnen danken. Sicher gibt es immer einen leichtern Weg, der im ersten Moment einfacher, besser und einfach unproblematischer erscheint. Die Erfahrung zeigt jedoch, dass Einfachheit ein lohnendes Ziel ist. Jedoch muss immer die Qualität im Vordergrund stehen. Machen Sie es „so einfach wie möglich, aber so komplex wie nötig“! Gerade bei der automatischen Verarbeitung von Daten sind Regeln außerordentlich wichtig. Zwar kommt man im Bereich der Webentwicklung auch gut zurecht, wenn man nicht alle Regeln genau nimmt, eine zu lockere Auslegung dieser Regeln wird sich aber früher oder später rächen.

Machen Sie sich Ihr eigenes Bild.

Tipp 4: Trennung von Inhalt und Layout