HTML/Tutorials/HTML5/Grundgerüst
Text-Info
- 5min
- einfach
- Grundkenntnisse in
• HTML
Im vorliegenden Kapitel lernen Sie das minimale Grundgerüst einer HTML5-Webseite kennen, wogegen das Einstieg in HTML-Tutorial die ersten Schritte in HTML erklärt.
Inhaltsverzeichnis
Kopiervorlage für ganz Ungeduldige
Ein Grundgerüst für Seiten, die auch tatsächlich im Internet veröffentlicht werden sollen, muss ein wenig über das minimale Grundgerüst hinausgehen.
<!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>
Informationen zu dem, was über das minimale Grundgerüst hinaus geht, finden Sie unter:
-
lang="de": Sprachkürzel -
<meta charset … >: Zeichencodierung -
<meta viewport … >: HTML/Kopfdaten/meta#Viewport einstellen
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:
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]
- 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.
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")
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
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.
<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.
<head>
<title>aussagekräftiger Seitentitel</title>
</head>
Zeichencodierung
In HTML müssen Sie wie bisher die Zeichencodierung festlegen.[2] Am einfachsten erreichen Sie dies durch die Angabe:
<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 Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein.
Viewportangabe
Für mobile Geräte ist wichtig, dass die Webseite responsiv ist:
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Angabe, dass der Viewport eingestellt wird, aber dennoch skaliert werden darf.Hauptartikel: HTML/Kopfdaten/meta#Viewport_einstellen
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.
<body>
<!-- Inhalt Ihrer Seite -->
</body>
Wie geht es weiter?
Dieses Grundgerüst ist die notwendige Grundlage für jede Webseite.
Im folgenden Kapitel werden die Elemente vorgestellt, mit denen Sie die innerhalb des body notierten Inhalte strukturieren.
- ↑ W3C: Doctype
- ↑ W3C: character-encoding
<!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>