HTML-Grundgerüst

Jedes HTML-Dokument hat mehr oder weniger das gleiche Grundgerüst.

siehe auch SelfHTML
direkt zum Grundgerüst unten auf dieser Seite

Die Dokumententyp-Deklaration

In der ersten Zeile sollte die Dokumenttyp-Deklaration stehen.

Die Grundvariante bezieht sich auf HTML 4.01 in einer nicht so strengen Form (Transitional) und verzeiht auch kleinere Fehler im Quellcode. Man muss sich das Leben ja nicht unnötig schwer machen. Bei Fehlen einer abschließenden URL wechseln einige Browser in den Quirks-Modus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Die zusätzliche Angabe einer URL schaltet den Browser in den Standardmodus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   ...
</html>

Wer sich selbst gern unnötig geißelt, kann auch die Variante Strict verwenden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
   ...
</html>

Beim Einsatz von reinem CSS-Layout gemäß Box Modell ist häufig die Angabe einer XHTML-Dokument-Deklaration notwendig.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
   ...
</html>

Beachten Sie hierbei die Ergänzung im Stammelement <html>

Das Stammelement <html>

Vereinfacht ausgedrückt sagt das Stammelement: Alles was nun folgt ist HTML. Am Dokumentende wird es wieder geschlossen: </html>

Der <head>

In den <head> gehören organisatorische Dinge der Webseite, wie z.B. der <title>. Dieser taucht an verschiedenen Stellen wieder auf:

in der Browser-Titelleiste ganz oben im Fenster und den Ausklapplisten der Vor- und Zurückbuttons
als Registerbeschriftung der TABs
als Namensvorschlag für Bookmarks
in den Ergebnislisten der Suchmaschinen als optisch hervorgehobener Link

Gerade bei den Suchmaschinen liest man sehr häufig Unbenannt1 oder Dokument1, ein Beweis, wie häufig der Seitentitel unterschätzt wird.

Ferner gehören in den <head> META-Angaben, Verweise auf eingebundene CSS-Dateien oder ähnliches. Der Inhalt des <head> wird nicht im Browserfenster dargestellt.

Der <body>

Im <body> stehen die Inhalte, welche im Browserfenster dargestellt werden sollen. Hierzu gehören Texte (z.B. Überschriften, Absätze, Listen) oder Bilder und schmückende Hintergrundgrafiken.

XHTML

XHTML unterscheidet sich im wesentlichen dadurch von HTML, dass auch Stand-Alone-Tags wie <meta>, <img> und <br> einen Abschluss erhalten, welcher dann wie folgt aussieht:

<img src="bild.jpg" width="100" height="100" alt="" />

Es wird also vor der schließenden Klammer eine Leerstelle und ein Slash notiert. Ferner müssen Tags in Kleinbuchstaben geschrieben sein und Werte in Anführungszeichen stehen. Bei HTML war dies nicht unbedingt erforderlich.

Befassen Sie sich mit diesen Unterschieden aber erst, wenn Sie schon etwas vertrauter mit HTML sind.

Beispielgrundgerüst eines HTML-Dokumentes (Transitional)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <title>
      Hier steht der Titel
    </title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
  </head>
  <body>

  </body>
</html>

Beispielgrundgerüst eines XHTML-Dokumentes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <title>
      Hier steht der Titel
    </title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index, follow" />
  </head>
  <body>

  </body>
</html>

Metatags

Die META-Angaben sind nicht zwingend erforderlich. Zum inneren Kern des Grundgerüstes gehört lediglich eine Angabe zum verwendeten Zeichensatz (charset).

Description liefert eine kurze Beschreibung des Inhaltes, jedoch in vollständigen Sätzen (sollte vorhanden sein) und unter Author kann man sich selbst ein Denkmal setzen (im Grunde überflüssig).

Die Robots-Angabe erlaubt (oder verbietet) Suchmaschinen das Aufnehmen in ihr Verzeichnis.

Es gibt noch weitere Metatags, die mehr oder minder wichtig bis unnütz sind. Die Wichtigsten wurden hier genannt.

Mythos Metatag

Es soll ja für die irrsinnigsten Dinge Metatags geben, wie z.B. den hier: <meta name="pagerank" content="7">. Aber probieren Sie ruhig aus, wieviel Sinn es macht, einer Suchmaschine die Platzierung Nr. 7 vorzuschreiben. Und warum nicht gleich die 1? Bei welcher Suchabfrage überhaupt? Also schnell wieder vergessen!

Und was ist mit Keywords?

Ein Relikt aus vergangenen Zeiten ist die Notierung von Schlüsselbegriffen als META-Angabe, um Suchmaschinen die Suche zu erleichtern. Aufgrund heftigen Missbrauchs dieses an sich guten Grundgedankens sind Google und Co. dazu übergegangen, Keywords zu ignorieren.

Viel wichtiger sind die META-Angabe Description und der Titel der Seite. Diese werden nämlich von den Suchmaschinen als Text angezeigt, letzterer als anklickbarer Link.

CSSKiste.de

Webseiten gestalten mit CSS!