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 aktuelle HTML-Versionen.

  • 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.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!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.

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.