HTML/Dokumentstruktur und Aufbau
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.)
<!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>
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.
Folgende Angaben sollten nicht fehlen:
-
<meta charset="utf-8" />Angabe der verwendeten Zeichenkodierung (hier: UTF-8)Hauptartikel: ZeichenkodierungBeachten 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. -
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Angabe, dass der Viepwrt eingestellt wird, aber dennoch skaliert werden darf.Hauptartikel: HTML/Kopfdaten/meta#Viewport_einstellen - 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.
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).
<!DOCTYPE html>Siehe auch
- Guter HTML-Stil
- Grundgerüst eines SVG-Dokuments
- Übersicht über Doctype-Deklarationen: W3C: Recommended list of Doctype declarations
<!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>