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:
Als Grundgerüst bezeichnet man ein HTML-Dokument, das nur diese Elemente enthält. Es wird folgendermaßen notiert:
<!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 --> </body> </html>
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:
<!DOCTYPE HTML>
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
Das head-Element (deutsch: Kopf) ist in allen HTML-Standards ein Pflicht-Element und enthält Informationen über den im body notierten Text.
Zwingend ist mindestens die Angabe eines Namens, daher muss jedes valide HTML-Dokument einen Titel haben.
Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Hier einige Beispiele:
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>
In HTML müssen Sie wie bisher die Zeichencodierung 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 Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein.
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.
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.