HTML/Dokumentstruktur und Aufbau

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hier ist der grundsätzliche Aufbau eines HTML-Dokuments beschrieben.

html
das gesamte HTML-Dokument
head
Kopfdaten, etwa Titel, Zeichencodierung
body
der anzuzeigende Inhaltsbereich

Grundgerüst einer HTML-Datei

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

  • Dokumenttyp-Deklaration
  • head (Kopfdaten. z. B. Angaben zu Titel u. ä.)
  • body (Körper – anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
Beispiel: HTML5 ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
    <p>Sehen Sie sich den Quellcode dieser Seite an.
      <kbd>(Kontextmenu: Seitenquelltext anzeigen)</kbd></p>
  </body>
</html>
Kopiervorlage:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>

Die erste Zeile ist eine Dokumenttyp-Deklaration. Einzelheiten dazu finden Sie weiter unten unter Dokumenttyp-Deklaration.

Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> und </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. Im html-Element muss mit dem lang-Attribut die Sprache des Seiteninhalts angegeben werden; das ist wichtig für die allgemeine Benutzbarkeit der Seite. (für deutschsprachige Seiten: <html lang="de">; für englischsprachige "en")

Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kopfdaten einer HTML-Datei notiert. Die wichtigste dieser Angaben ist der Titel der HTML-Datei, markiert durch <title> und </title>. Der Titel enthält am besten sowohl den Titel der aktuellen Seite als auch den Namen der Website.

Ebenfalls sinnvoll ist die Angabe der verwendeten Zeichenkodierung (hier: UTF-8) sowie eine viewport-Angabe, damit Smartphones oder Tablets die Seite angepasst darstellen. Näheres zum genauen Aufbau dieser Zeilen finden Sie bei den Metadaten.

Beachten Sie, dass diese Angabe zur Zeichenkodierung nicht immer die einzige ist, die der Browser erhält, wenn die Datei aus dem Internet geladen wird, und es somit trotzdem Probleme mit der Darstellung geben kann.
Hauptartikel: Zeichenkodierung

Unter der Angabe zur Zeichenkodierung folgt in unserem Grundgerüst der Textkörper, begrenzt durch <body> und </body>. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des Browsers angezeigt werden soll.

Die genannten Tags <html>, </html>, <head>, </head>, <body> und </body> sind optionale Tags, d.h. sie könnten beim Schreiben von HTML auch weggelassen werden, was aber nicht empfehlenswert ist.

Dokumenttyp-Deklaration

Die Dokumenttyp-Deklaration ist ein aus SGML und XML übernommenes Konzept. Während sie dort eine andere Bedeutung hat, wird sie in HTML zu dem Zweck verwendet, Browser in dem Standard-Modus zu schalten (und nicht in den Quirks Modus).

  • HTML5
Beispiel
<!DOCTYPE html>
Beachten Sie: Die früher verwendeten Dokumenttyp-Deklarationen für HTML 4.01 oder älter und XHTML 1.x sollten Sie nicht mehr verwenden. Verwenden Sie ausschließlich <!DOCTYPE html>

Siehe auch