Markup: Elemente, Attribute und Werte im HTML5

HTML5 und die Bedeutung von Markup

Nachdem Sie nun  HTML5 etwas kennengelernt haben, wollen wir uns genauer anschauen, woraus das Markup, also die Auszeichnungen, bestehen. HTML5 verfügt über drei wesentliche Markup-Komponenten: Elemente, Attribute und Werte. Von allen haben Sie schon Beispiele in unserer  Basisseite gesehen.

Elemente

Elemente sind wie kleine Etiketten, die die verschiedenen Teile einer Webseite beschreiben: "Dies ist eine Überschrift, das Ding da drüben ist ein Absatz und diese Gruppe von Links ist die Navigation." Wir haben im vorigen Abschnitt einige Elemente diskutiert. Manche Elemente haben ein Attribut oder auch mehrere, die Aufgabe und Inhalt (falls vorhanden) des Elements näher beschreiben.

Elemente können Text und andere Elemente enthalten oder leer sein.

Wenn ein Element nicht leer ist, enthält es ein Start-Tag (tag: Englisch für Etikett), also den Namen und gegebenenfalls die Attribute des Elements, die in größer-als- und kleiner-als-Symbole eingefasst sind, sowie ein End-Tag. Letzteres ist ein Schrägstrich (Slash), gefolgt vom Namen des Elements, wieder in die größer/kleiner-als-Zeichen gefasst.

Leere Elemente wie das hier gezeigte img umgeben keinen Textinhalt (der Text des alt-Attributs gehört zum Element und wird nicht davon umschlossen). Sie haben nur ein Tag, mit dem das Element sowohl geöffnet als auch geschlossen wird. In HTML5 sind Leerzeichen und Schrägstrich optional, aber üblicherweise werden sie geschrieben. Aber das >, mit dem das Element abgeschlossen wird, darf nicht wegfallen.

<img src="turn_right_128.png" width="128" height="128" alt="HTML5 Lernen - Grundlagen und Tutorials" />

Ein leeres Element sieht wie eine Kombination aus Start- und End-Tag aus: zu Anfang ein kleiner-als-Zeichen, der Name des Elements, gegebenenfalls gefolgt von Attributen, ein optionales Leerzeichen, ein optionaler Schrägstrich und dann das erforderliche finale größer-als-Zeichen.

Ehrlich gesagt werden wahrscheinlich alle, die bereits XHTML geschrieben haben, bei dem der Schrägstrich zum Schließen eines leeren Elements erforderlich ist, das auch bei HTML5 so machen. Andere lassen es sicherlich weg. Ich nehme es in meinen Code auf, aber wenn Sie sich anders entscheiden, wird sich die Seite exakt genauso verhalten. Egal wie - ich rate aber auf jeden Fall dazu, es konsistent zu machen.

Üblicherweise werden die Elementnamen auch alle klein geschrieben, obwohl HTML5 hier nicht zimperlich ist und auch Großbuchstaben erlaubt. Allerdings ist es heutzutage eine Seltenheit, jemanden zu finden, der in Großbuchstaben schreibt. Wenn sich da bei Ihnen also nicht gerade der Rebell regt und Sie es nicht lassen können, rate ich davon ab. Es wird als veraltete Praxis betrachtet.

Attribute und Werte

Attribute enthalten Informationen über den Inhalt des Dokuments und sind selbst kein Inhalt. In HTML5 kann man den Wert eines Attributs optional in Anführungszeichen einschließen, aber üblicherweise wird das immer gemacht, und dazu rate ich Ihnen auch. Und wie bei den Elementnamen empfehle ich auch hier, die Attributnamen klein zu schreiben.

In diesem Kapitel werden Sie zwar Einzelheiten über akzeptable Werte für die meisten Attribute finden, aber ich möchte hier kurz umreißen, mit welcher Art Werten Sie es im weiteren Verlauf zu tun bekommen werden.

Manche Attribute akzeptieren jeden Wert, andere sind da eingeschränkter. Vielleicht am häufigsten werden jene eingesetzt, die Zahlen- oder vordefinierte Werte akzeptieren. Anders gesagt: Sie müssen sich aus einer Reihe von Standards etwas auswählen. Achten Sie darauf, aufgezählte Attributwerte immer klein zu schreiben.

Viele Attribute brauchen als Wert eine Zahl, vor allem solche, die Größe und Breite/Länge beschreiben.

Ein numerischer Wert enthält nie eine Einheit, nur die Zahl. Wo Einheiten anwendbar sind wie z.B. in der Höhe und Breite eines Bilds bzw. Videos, werden sie als Pixel verstanden.

Manche Attribute wie href und src beziehen sich auf andere Dateien und müssen somit Werte in der Form eines URL (Uniform Resource Locator) enthalten. Das ist die eindeutige Adresse einer Datei im Internet. Über URLs erfahren Sie mehr im entsprechenden Abschnitt dieses Kapitels.

Eltern und Kinder

Wenn ein Element ein weiteres Element enthält, wird es als Eltern-Element des (untergeordneten oder eingeschlossenen) Kind-Elements bezeichnet. Alle Elemente, die im Kind-Element enthalten sind, bezeichnet man als Nachfahren des äußeren bzw. übergeordneten Eltern-Elements. Sie können für eine Webseite einen regelrechten Stammbaum aufzeichnen, der sowohl die hierarchischen Beziehungen zwischen allen Elementen der Seite zeigt als auch jedes Element eindeutig identifiziert.

Diese zugrunde liegende stammbaumähnliche Struktur ist eine zentrale Eigenschaft des HTML5-Codes und erleichtert es, den Elementen Stilvorlagen, sogenannte Styles hinzuzufügen und JavaScript-Effekte darauf anzuwenden.

Ganz wichtig: Wenn ein Element andere Elemente enthält, dann muss jedes Element korrekt verschachtelt werden, d.h. vollständig in seinem Eltern-Element enthalten sein. Sobald Sie ein schließendes Tag verwenden, sollte es sich auf das letzte, nicht geschlossene öffnende Tag beziehen. Anders ausgedrückt: Zuerst wird Element 1 geöffnet, dann Element 2, dann wird Element 2 geschlossen und zum Schluss auch Element 1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
	<h1>
		HTML5 Lernen - Grundlagen und Tutorials
	</h1>
	<img src="turn_right_128.png" ... /> 
	<p>
		... bietet neue <em>Elemente</em> ... HTML5 <a ...>HTML5 Lernen - Grundlagen und Tutorials</a> ...
	</p>
</article>
</body>
</html>

Das article-Element ist das Eltern-Element für h1, img und p. Umgekehrt sind die Elemente h1, img und p Kinder (und Nachfahren) von article. Das p-Element ist sowohl für em als auch a das Eltern-Element. em und a sind Kinder von p und auch Nachfahren (aber keine Kinder) von article. Umgekehrt ist article deren Vorfahr.

Elemente müssen korrekt verschachtelt sein. Wenn Sie erst p öffnen und dann em, müssen Sie zuerst em wieder schließen, bevor Sie p schließen.