Grundgerüst eines HTML-Dokuments

Das Grundgerüst jedes HTML-Dokumentes umfasst folgende Zeilen:

<!DOCTYPE html>
<html lang="...">
  <head>
    <title>Titel des Dokumentes</title>
    <meta charset="UTF-8">
    <!-- weitere Kopfinformationen -->
  </head>
  <body>
    <!-- Inhalt der Webseite -->
  </body>
</html>

Das html-Element

html ist das Wurzelement eines HTML-Dokumentes, dessen Sprache mit lang="Sprachenkürzel" angegeben wird. Für Deutsch lautet das Sprachenkürzel de-DE.

Optional kann über manifest="URL" eine Manifest-Datei angegeben werden, die Informationen zur Verwendung des Anwendungscache enthält.

Das head-Element

Der HTML-Kopf (head) ist für den Surfer – bis auf den Dokumenttitel title – unsichtbar. Hier stehen Meta- und Link-Elemente, die das Dokument näher beschreiben oder die Beziehungen zu anderen Dokumenten angeben. Außerdem können hier mit dem script Skripte geladen werden, die schon beim Seitenaufbau benötigt werden.

Die meta-Elemente

Metadaten liegt die Idee zu Grunde, dass der Autor selbst Informationen über die Inhalte seines Dokumentes zur Verfügung stellt. Aufgrund von Manipulationen durch den Verfasser werden diese heute von Suchmaschinen aber nicht für sonderlich wichtig genommen, jedoch sollten die beiden folgenden Meta-Elemente sollte gesetzt werden:

<meta name="description" content="Kurzbeschreibung des Inhalts (ca. 150 Zeichen)">
<meta charset="UTF-8">

Mit <meta name="viewport" content="width=device-width"> kann die Breite des Viewports für mobile Geräte gesetzt werden. Weitere meta-Elemente sind in der Regel weder erforderlich noch sinnvoll.

Die link-Elemente

Link-Elemente machen die Beziehung eines Dokumentes zu anderen Dokumenten deutlich. Sie werden von den meisten Browsern leider nur unzureichend interpretiert. Sie haben die Form <link rel="Art der Beziehung" href="URI" title="Verweistext">.

Das Attribut rel dabei gibt an, welche Art von Beziehung zu dem unter href verlinkten Dokument besteht. Mögliche Attributwerte für rel gemäß der HTML 5 Spezifikation sind:

  • alternate für eine alternative Version des Dokumentes (zusammen mit lang="Sprachenkürzel" eine Übersetzung in eine andere Sprache, zusammen mit media="Medientyp" eine andere Medienform)
  • author für Informationen zum Autor
  • help für ein Hilfe-Dokument
  • icon für ein Favicon
  • license für Informationen zu den Lizenzrechten
  • next für das nächste Dokument
  • prev (previous) für das vorherige Dokument
  • search für die Suchfunktion
  • stylessheet für die Verlinkung zu einer CSS-Datei

Das body-Element

Im HTML-Körper (body) steht der eigentliche Inhalt, also das, was der Browser auch wirklich angezeigt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.