4.1.3 Einführung in die HTML-Syntax

Bevor wir in die HTML-Syntax einsteigen, sind drei Begriffe zu klären, die immer wieder vorkommen.

Ein HTML-Tag ist eine Auszeichnung, z.B. <h1>.
Ein HTML-Element besteht aus dem Start-Tag, dem Inhalt und dem End-Tag <h1>Hallo</h1>. Es gibt auch leere Elemente, die nur aus einem Tag bestehen, beispielsweise <br>.
Ein HTML-Attribut ist eine Ergänzung des Tags um eine weitergehende Anweisung vorzunehmen z.B. <h1 class="MeineBezeichnung">. Zu jedem Attribut gehört eine Bezeichnung oder ein Wert. Die Reihenfolge der Attribute innerhalb eines Tags ist unwichtig für die Ausführung.

Das HTML-Grundgerüst

Eine normale HTML-Datei besitzt grundsätzlich den unten im Sourcecode dargestellten Aufbau.

Dokumenttyp-Deklaration (1. Zeile), enthält die Angabe der HTML-Version. <!doctype html> ist die typische Angabe für HTML 5.
Wurzel-Element (2. Zeile) <html> mit dem Attribut lang="de" zur Angabe der Sprache.
Header (3.-9. Zeile), enthält die Kopfdaten wie z.B. Angaben zur Codierung, zum Titel der Webseite oder Angaben für Suchmaschinen.
Body (11.-13. Zeile), enthält den anzuzeigenden Inhalt (Text, Grafiken etc.)

<!doctype html>
<html lang="de">
<head>
    <title>Mein Titel</title>
    <link rel="stylesheet" href="main.css" media="screen">
    <meta charset="utf-8">
    <meta name="author" content="Thomaschewski">
    ...
</head>
<body>
    ...
</body>
</html>

Dem HTML-Interpreter (Browser) ist es nicht wichtig, ob wir die Tags groß oder klein schreiben. Verwenden wir jedoch immer die Kleinschreibung der Tags, denn nur diese ist HTML-konform.

HTML-Dateien bestehen also aus lesbarem Sourcecode. Der Inhalt der Dateien steht in HTML-Elementen, die durch sogenannte Tags beschrieben werden. Diese Tags legen fest, zu welcher Art die eingeschlossenen Elemente gehören (z.B. Überschriften oder Listen). Bei nahezu allen HTML-Elementen gibt es ein einleitendes und ein abschließendes Tag, jedoch nur der Inhalt dazwischen wird angezeigt. Ausnahmen sind die leeren Elemente.

Leere Elemente (engl. void-elements)

Es gibt leere Elemente, die keinen Inhalt haben und nur aus einem Tag bestehen. Ein Beispiel dafür ist das <br>-Tag, ein manueller Zeilenumbruch.

In HTML 5 wird <br> geschrieben und dient zur Ausgabe auf dem Browser (mit dem MIME-type text/html).
In XHTML 5 wird <br /> geschrieben und es dient zur automatisierten Weiterverarbeitung (mit dem MIME-type application/xhtml+xml). In der "normalen" HTML 5 Syntax wird also normalerweise <br> verwendet, gemäß den Empfehlungen des W3C.
Aber Achtung: Wenn die HTML-Dokumente automatisch verarbeitet werden (mit XML-Prozessoren), dann sollten wir XHTML 5 verwenden, also <br />, da die XML-Prozessoren ansonsten die HTML-Elemente als fehlerhaft erkennen (nicht well-formed).

Verschachtelung von Elementen

HTML-Elemente können verschachtelt werden, sodass eine Hierarchie entsteht. Die Verschachtelung kann bereits am oben gezeigten Beispiel erkannt werden. Das Root-Element <html> besitzt bereits zwei Kindelemente <head> und <body>.

Das Element <head> wiederum besitzt die Kindelemente <meta> und <title>. Das Element <meta> ist ein leeres Element (void-element).

Natürlich werden auch innerhalb des Elements <body> weitere verschachtelte Elemente eingesetzt, z.B. das Element <h1> zur Auszeichnung einer Überschrift. Für eine korrekte Syntax ist es wichtig, dass Kindelemente jeweils geschlossen werden, bevor das übergeordnete Elternelement geschlossen wird.