Grundlagen: Webprogrammierung mit HTML und CSS

Das Grundgerüst einer Webseite wird gerne vernachlässigt. Doctype, Meta- Daten und allerlei oft überflüssige Code- Zeilen übernimmt man einfach so, wie es der HTML-Editor vorgibt. CSS und JavaScripts wuchern vor sich hin. Kleine Fehler in HTML- und CSS-Code summieren sich zu großen Problemen. Für eine saubere und performante Website liegt hier aber schon der Grundstein. Der Workshop zeigt, worauf Sie achten sollten und wo Sie Code-Zeilen sparen können.

Meta-Informationen

In Meta-Tags lassen sich zusätzliche Informationen zu einer Webseite unsichtbar in den Code einbetten. Einige Meta-Informationen geben beispielsweise Hinweise an Suchmaschinen, ob eine Seite indiziert werden soll, andere enthalten Kurzbeschreibungen der Seite, den Namen des Autors und des verwendeten HTML-Editors.Zwingend notwendig ist keine dieser Meta-Informationen, weswegen sie auf ein Minimum beschränkt bleiben sollten, um die Größe der HTML-Datei so klein wie möglich zu halten. Lediglich einige wenige Meta-Informationen bringen fast immer zusätzlichen Nutzen und sollten deshalb enthalten sein.Vorsicht ist geboten mit allen Meta-Informationen, die beispielsweise HTML und manche CMS automatisch ausliefern. Keywords sind beispielsweise in Hinblick auf Suchmaschinenoptimierung weitgehend obsolet, können aber Schaden anrichten, wenn sie Keywords enthalten, die nicht zum Thema der Website passen. Typisch sind beispielsweise der Name des Template- Designers bei WordPress und ähnliche Informationen, die im Keyword-Metatag nichts verloren haben.

Content Type

Definiert die vom Browser zu verwendende Zeichencodierung. In der Regel arbeitet man heute mit utf-8, die jegliches erdenkliche Sonderzeichen und für die deutsche Sprache insbesondere die Umlaute und das "ß" abdeckt.

Ebenfalls sehr gebräuchlich ist Latin 1 (ISO8859-1), die mit iso-8859-1 deklariert wird. Wird die Zeichencodierung nicht definiert, würde ein Browser mit einer anderen Spracheinstellung als Deutsch die Umlaute falsch darstellen. Auch in Hinblick auf Suchmaschinen-Crawler führt das regelmäßig zu ärgerlichen Problemen. Achten Sie darauf, dass Sie den Zeichensatz angeben, mit dem Ihr HTML-Editor die Daten abspeichert.Meist lässt sich das in den Optionen einstellen. Erzeugt man im HTML-Editor eine neue HTML-Seite, fügt der Editor die richtige Angabe zur Zeichencodierung meist schon automatisch in die Seite ein. Deklaration von UTF-8 als Content Type:

Kurzbeschreibung

Zwar ignorieren Suchmaschinen das description- Tag in Hinblick auf die Bewertung des Inhalts der Website, verwenden den Text daraus aber häufig bei der Anzeige von Suchergebnissen. Hierüber können Sie also in gewissen Grenzen mitbestimmen, was ein User liest, wenn die betreffende Seite in den Suchergebnissen einer Suchmaschine aufgelistet wird. Beispiel:

Achten Sie hier besonders darauf, dass Umlaute korrekt ausgegeben werden.

Robots

Über den robots-Tag geben Sie den Suchmaschinen eine Empfehlung, wie sie mit der Webseite umgehen sollen. Beispiel:

index,follow ist das Standard-Verhalten und muss eigentlich nicht angegeben werden. Möchten Sie aber beispielsweise, dass die Seite zwar nicht indiziert wird, die enthaltenen Links aber verfolgt werden, ist noindex,follow sinnvoll. Soll die Seite indiziert, Links aber nicht gefolgt werden, hilft index,nofollow weiter.Aber Vorsicht: Eine Zugangssperre stellt dieses Tag nicht dar, es gibt lediglich Empfehlungen an den Suchmaschinen- Crawler. Das noarchive-Attribut bestimmt, dass Suchmaschinen keine älteren Versionen der Seite im Archiv behalten sollen. Vor allem für Startseiten von Nachrichten- Portalen, die sich ständig verändern, kann dies sehr sinnvoll sein.

Canonical URL

Um Duplicate-Content-Probleme mit Suchmaschinen zu vermeiden, lässt sich mit canonical die Haupt-URL für Content definieren. Das ist sinnvoll, wenn der identische Content unter verschiedenen URLs erreichbar ist, was häufig bei CMS und Foren auftritt, aber auch schon, wenn man für seine Seiten eine zusätzliche Druckversion anbietet. Suchmaschinen verwenden dann die Haupt-URL zur Indizierung und ignorieren die weiteren Seiten mit demselben Content. Beispiel:

Favicon

Was auf den ersten Blick wie eine Spielerei aussieht, hat einen hohen praktischen Nutzen. Definieren Sie ein Favicon, zeigen Browser dieses Logo sowohl neben der Adresszeile im Browser als auch in den Bookmarks an. Mit einem Favicon schaffen Sie einen zusätzlichen Wiedererkennungswert für Ihre Website. Beispiel:

CSS und JavaScript

Weitere Einträge im <head>-Bereich einer HTML-Datei dienen dazu, CSS sowie JavaScripts einzubinden. Früher waren dazu umständliche Code-Konstrukte nötig, um Browser nicht aus dem Tritt zu bringen, die JavaScript und CSS nicht interpretieren konnten. Das kann man sich inzwischen sparen, denn Browser, die kein JavaScript oder CSS interpretieren können, gibt es quasi nicht mehr. Ein JavaScript binden Sie daher ganz einfach wie folgt ein: