HTML/Tutorials/HTML5-Grundgerüst

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im vorliegenden Tutorial lernen Sie das minimale Grundgerüst einer HTML5-Webseite kennen, wogegen das HTML-Einstieg-Tutorial die ersten Schritte in HTML erklärt. Eine Strukturierung des Inhaltsbereichs einer Webseite finden Sie unter HTML/Tutorials/HTML5-Seitenstrukturierung.

Kopiervorlage für ganz Ungeduldige

Ein Grundgerüst, welches für Seiten, die auch tatsächlich im Internet veröffentlicht werden sollen, verwendet wird, muss ein wenig über das minimale Grundgerüst hinausgehen.

Beispiel: 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>

Informationen zu dem, was über das minimale Grundgerüst hinaus geht, finden Sie unter:

Aufbau des Grundgerüstes

Ein valides HTML5-Dokument, also eine Webseite, die dem vom W3C vorgegebenen Standard entspricht, besteht mindestens aus der Angabe des Dokumententyps und aus folgenden Elementen:

  • html
  • head
  • title
  • body

Als Grundgerüst bezeichnet man ein HTML-Dokument, das nur diese Elemente enthält. Es wird folgendermaßen notiert:

Beispiel
<!doctype html> <html> <head> <title></title> </head> <body> </body> </html>

Der Doctype

Es gibt von HTML verschiedene Versionen (HTML 1 bis HTML 4.01 und HTML5). Eine Zeit lang wurden Webseiten nicht in HTML, sondern in XHTML geschrieben. Die Dokumenttyp-Deklaration am Anfang eines jeden HTML-Dokumentes informiert über die Art des Dokumentes.

Der aktuelle Standard für HTML-Dokumente ist HTML5 und wird wie folgt angegeben.

Beispiel
<!doctype html>

Das HTML-Element

Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Stammbaum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht.

Es wird unterteilt in

  • head - Informationen über die Seite, die von Programmen wie z. B. Suchmaschinen oder Browsern ausgewertet werden
  • body - die eigentlichen, vom Browser darzustellenden Informationen
Beispiel
<!doctype html> <html> <head> </head> <body> </body> </html>

Der head: unsichtbar, aber unverzichtbar

Das head-Element (deutsch: Kopf) ist in allen HTML-Standards ein Pflicht-Element und enthält Informationen über den im body notierten Text.

Beispiel: head
<head></head>

Zwingend ist mindestens die Angabe eines Namens, daher muss jedes valide HTML-Dokument einen Titel haben.

der Titel

Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Hier einige Beispiele:

  • Browser zeigen ihn in der Registerkarte (Tab) an,
  • Microsoft Windows blendet ihn in der Taskleiste als Tooltip ein,
  • Suchmaschinen verwenden ihn in der Regel als Bezeichnung für einen Treffer
  • Nutzern von Vorleseprogrammen wird der Titel beim Wechsel auf eine Seite als erstes Vorgelesen.

Dem Titel kommt also eine besondere Bedeutung zu und er sollte daher aussagekräftig sein. Um die einzelnen Seiten eindeutig unterscheiden zu können, empfiehlt es sich außerdem, einen Titel nicht für zwei oder mehr HTML-Dokumente innerhalb eines Webauftrittes zu verwenden. Vergeben Sie besser für jede Seite einen einmaligen Namen.

Beispiel: title -Element im head
<head>
  <title>aussagekräftiger Seitentitel</title>
</head>

Der body: sichtbarer und strukturierter Aufbau

Was Sie in das body-Element schreiben, wird im Hauptbereich des Browsers dargestellt, der für die eigentliche Webseite reserviert ist (Viewport). In diesen Bereich kommen alle auf der Webseite sichtbaren Informationen.

Beispiel: body
<body>
  <!-- Inhalt Ihrer Seite -->
</body>

Wie geht es weiter?

Dieses Grundgerüst ist die notwendige Grundlage für jede Webseite. Hier im Wiki finden Sie einen weiteren Artikel, der über das hier vorgestellte minimale Grundgerüst hinaus sinnvolle Ergänzungen und Hintergründe bespricht: Grundgerüst einer HTML-Datei

Im Tutorial werden die Elemente vorgestellt, mit denen Sie die innerhalb des body notierten Inhalte strukturieren.