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
unsichtbare 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 (unsichtbare 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>aussagekräftiger Titel der Seite</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> bzw. </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. 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>. 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