1.1 Grundstruktur eines HTML-Dokuments

Ein HTML-Dokument beschreibt Struktur, Inhalt und gegebenenfalls Formatierung eines digitalen Dokuments. HTML-Dokumente bilden die Grundlage des World Wide Web und werden von Webbrowsern dargestellt.

Jedes HTML-Dokument wird in einer eigenen Datei gespeichert, die mit einem Texteditor bearbeitet werden kann.

Dokumenttyp

In der ersten Zeile der Datei wird der Dokumenttyp angegeben. Dieser verrät einem Webbrowser, nach welchem Regelwerk (Dokumenttypdefinition, kurz DTD) das vorliegende Dokument erstellt worden ist. Der Browser benötigt diese Information, um das Dokument korrekt darstellen zu können.

Wird ein HTML-Dokument nach den Regeln von HTML5 erstellt, muss als Dokumenttyp <!DOCTYPE html> angegeben werden.

img/Abb_1_1_Dokumententyp.svg
Abb. 1-1: Dokumenttyp HTML5

HTML-Elemente

Ein HTML-Dokument besteht aus HTML-Elementen. In der Regel beschreibt der Name eines HTML-Elements, um was es sich bei seinem jeweiligen Inhalt handelt, zum Beispiel eine Überschrift oder eine Tabelle.

HTML-Elemente werden durch Tags1 markiert. Die meisten Elemente werden durch ein Start-Tag eingeleitet und einen dazugehörigen End-Tag beendet. Dazwischen wird der jeweilige Inhalt angegeben. Jeder Tag enthält den Namen des Elements und wird in spitze Klammern eingeschlossen. Beim End-Tag wird zusätzlich ein Schrägstrich vor dem Namen eingefügt.

img/Abb_1_2_Aufbau_HTML-Element.svg
Abb. 1-2: HTML-Element

html-Element

Das HTML-Element ist das Wurzelelement (root) eines HTML-Dokuments, das alle weiteren Elemente aufnimmt.

img/Abb_1_3a_html-Element.svg
Abb. 1-3a: html-Element

HTML-Attribute bieten zusätzliche Informationen über das jeweilige Element. So gibt zum Beispiel das lang-Attribut Auskunft über die Sprache, in welcher der Inhalt des jeweiligen Elements verfasst ist. Die Sprachkürzel sind in ISO 639-1 festgelegt, zum Beispiel de für Deutsch und en für Englisch.

Die Angabe des lang-Attributs ist nicht verpflichtend, wird jedoch empfohlen, da es von Webbrowsern und Suchmaschinen abgefragt wird.

img/Abb_1_3b_html-Element.svg
Abb. 1-3b: Der Inhalt dieses html-Elements wird in deutscher Sprache verfasst werden.

head- und body-Element

Das html-Element enthält ein head- und ein body-Element. Das head-Element enthält Informationen für den Webbrowser bzw. Suchmaschinen, zum Beispiel den verwendeten Zeichensatz oder den Titel des Dokuments. Das body-Element enthält den Inhalt des Dokuments.

img/Abb_1_4_head_body-Element.svg
Abb. 1-4: head- und body-Element

Ein Element, das andere Elemente enthält, wird Elternelement genannt. Elemente, die Teil eines anderen Elements sind, werden als Kindelemente bezeichnet. So ist zum Beispiel das html-Element das Elternelement der Elemente head und body, die wiederum dessen Kindelemente sind (vgl. Abbildung 1-4).

Kindelemente können selbst auch Elemente enthalten. Sie sind dann deren Elternelement.

Merke: CSS-Regel