HTML/Tutorials/HTML5/Grundgerüst

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | HTML5
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
5min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML

Im vorliegenden Tutorial lernen Sie das minimale Grundgerüst einer HTML5-Webseite kennen, wogegen das Einstieg in HTML-Tutorial die ersten Schritte in HTML erklärt.


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>

Für den produktiven Einsatz sollten Sie jedoch das Grundgerüst aus der Kopiervorlage verwenden.

Doctype

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

In HTML5 können Sie die Dokumenttyp-Deklaration rigoros vereinfachen:[1]

Beispiel: Angabe einer Dokumenttyp-Deklaration
<!DOCTYPE HTML>
Empfehlung: Erstellen Sie HTML5-Dokumente.
  • Jeder Browser „versteht“ diesen Doctype.
  • Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
  • Der doctype ist kürzer und übersichtlicher ;-)

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>

Zeichenkodierung

In HTML müssen Sie wie bisher die Zeichenkodierung festlegen.[2] Am einfachsten erreichen Sie dies durch die Angabe:

Beispiel: Zeichencodierung
<meta charset="utf-8">
Beachten Sie: Wenn Sie für HTML5-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.
Des Weiteren muss das Dokument auch mit dieser Zeichenkodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichenkodierung abgespeichert sein.


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 folgenden Tutorial werden die Elemente vorgestellt, mit denen Sie die innerhalb des body notierten Inhalte strukturieren.


  1. W3C: Doctype
  2. W3C: character-encoding