HTML5: Syntax von HTML-Elementen

HTML-Dokumente haben von der Idee her einen einfachen Aufbau, welcher auf Elementen basiert. Hinzu kommen wenige besondere Strukturen, die in folgenden Kapiteln erläutert werden.

HTML5 sieht zwei Möglichkeiten vor, wie Inhalt notiert werden kann. Zum einen ist das die XML-Syntax, die recht einfach ist, keine Sonderregeln aufweist, daher für Autoren leicht zu merken ist, für Programme leicht zu interpretieren. XML-Syntax findet auch bei zahlreichen anderen Formaten Anwendung. Programme, welche die XML-Syntax interpretieren (englisch: XML parser) zeigen Syntax-Fehler unmittelbar an, woraufhin Autoren sie vor einer Veröffentlichung leicht korrigieren können.

Die andere Notation ist spezifisch für HTML5 und findet sonst für kein anderes Format Anwendung. Diese wird im Folgenden kurz Markierungssuppen-Variante genannt, was auf die Ursache ihrer Herkunft hindeutet:
Die spezielle Syntax wurde aus dem entwickelt, wie Programme teils falsch ältere Versionen von HTML interpretiert haben, dazu eben auch fehlerhaftes HTML von Autoren, englisch: tag soup. Die Notation hat daher gegenüber der XML-Notation zahlreiche Sonderregeln, ist mit dieser also nicht kompatibel. Programme, welche diese Syntax interpretieren, weisen nicht auf Syntax-Fehler hin.

Teils wird diese Notation von einigen Autoren auch HTML-Notation genannt, was allerdings insofern etwas unglücklich ist, weil die Syntax von HTML 1-4 etwas anders ist als die Markierungssuppen-Variante von HTML5.

Um die Syntax-Verwirrung von HTML5 zu reduzieren und eine allgemeine Verwendbarkeit zu verbessern, ist es jedoch möglich, eine Notation zu verwenden, die sowohl zu XML kompatibel ist, als auch zu den Markierungssuppen-Regeln paßt. Auf diesen Kompromiß wird im Buch im Zweifelsfalle immer wieder eingegangen. Sofern es gegenüber der XML-Notation Einschränkungen gibt, um dies zu erreichen, werden sie erwähnt. Die Markierungssuppen-Variante enthält auch zahlreiche zusätzliche Notationsmöglichkeiten, die nicht weiter erwähnt werden. Diese haben inhaltlich keinen Mehrwert, einige sparen ein paar Byte bei der Dateigröße, es müßten dafür allerdings umfangreiche Regelwerke gelernt werden, wann eine spezielle Kurz-Notation erlaubt ist, wann nicht.

Elemente

Jedes HTML-Element wird mit sogenannten Elementmarkierungen gekennzeichnet (Markierung auf englisch: tag).

Eine Markierung beginnt mit dem Zeichen '<' und endet mit dem Zeichen '>'
Zu unterscheiden ist zwischen einer Anfangsmarkierung und einer Endmarkierung.

Bei einer Anfangsmarkierung folgt auf '<' der Name des Elementes. Groß- und Kleinschreibung ist beim Namen in der XML-Notation relevant. Alle Elemente von (X)HTML haben in der XML-Notation nur kleine Buchstaben oder Ziffern. Dies kann in anderen Sprachen anders sein, zum Beispiel werden in RDF oder SVG auch Großbuchstaben in Elementnamen verwendet.

Nach dem Elementnamen folgen eventuell Attribute, jeweils durch Leerzeichen vom Elementnamen und voneinander separiert, optional auch vom finalen '>'. Ein Attribut wird notiert als sein Name, optional gefolgt von Leerzeichen, gefolgt von einem Gleichheitszeichen, optional gefolgt von Leerzeichen, darauf folgt der Attributwert in Anführungszeichen, also entweder doppelte " oder einfache '. Enthält der Attributwert selbst das Anführungszeichen, so ist dieses zu maskieren (für " ist dann " zu notieren, für ' ist ' zu verwenden).

Bei einer Endmarkierung folgt nach dem '<' ein '/', gefolgt vom Elementnamen. Nach optionalen Leerzeichen folgt das Ende der Markierung mit '>'.

Zwischen der Anfangs- und der Endmarkierung steht der Inhalt des Elementes.

Sofern nichts anderes angegeben ist, werden mehrere, aufeinanderfolgende Leerzeichen vor der Präsentation zu einem zusammengefaßt. Neben dem einfachen Leerzeichen zählen dazu auch Zeilenumbrüche oder Vorschübe. Für solche Strukturen gibt es in HTML wiederum spezielle Elemente, um sie zur Präsentation zu bringen.

Dies ist ein Beispiel für eine Überschrift:

<h1 id="u">Das ist eine Überschrift</h1>

Bei dem Beispiel gibt es ein Element namens h1 mit den Inhalt 'Das ist eine Überschrift'. Notiert sind Anfangs- und Endmarkierung und in der Anfangsmarkierung ein Attribut id mit dem Wert 'u'.

Ist kein Inhalt vorhanden, also auf das '>' der Anfangsmarkierung folgt unmittelbar das '<' der Endmarkierung, so kann alternativ eine Kurzschreibweise verwendet werden. Dies sind sogenannte inhaltsleere Elemente. Dies ist in der Variante mit XML-Notation immer erlaubt, in der Markierungssuppen-Variante jedoch nur bei bestimmten Elementen, für welche dies speziell in der Spezifikation angegeben ist.

Bei der Kurzschreibweise bei Verwendung der XML-Notation gibt es keine Endmarkierung, die Anfangsmarkierung endet mit der Zeichenkombination '/>'.

Elemente, für welche in HTML nie Inhalt vorgesehen ist, die also gemäß Spezifikation immer inhaltsleer sein müssen, werden in der Spezifikation auch englisch void element (Leer-Element, Nichts-Element) genannt. Diese können wie inhaltsleere Elemente in der XML-Variante notiert werden, zum Beispiel ein Pixelbild:

<img src="badendeVenus.jpg" alt="badende Venus" />

oder ein Separator (meist als horizontaler Strich präsentiert):

<hr />

oder ein manueller Zeilenumbruch:

<p>
Ein manueller Zeilenumbruch:<br />
Text danach.
</p>

Diese Notation ist also sowohl für die XML-Variante korrekt, als auch für die Markierungssuppen-Variante, also für ein Leer-Element immer zu empfehlen.

Nur in der Markierungssuppen-Variante ist es auch zulässig, lediglich die Anfangsmarkierung zu notieren, hier wäre sogar anders als in der XML-Variante das Notieren einer Endmarkierung falsch.

Damit ein Programm die Markierungssuppen-Variante korrekt interpretieren kann, ist es also erforderlich, daß dieses genaue Kenntnis darüber hat, welches Element ein Leer-Element ist. Daraus ergibt sich bereits deutlich ein Vorteil der XML-Variante: Die Notation folgt dort einfachen Regeln, die sich Autoren leicht merken und immer gleich bei jedem Element anwenden können und die zunächst bei den Autoren und Programmen keine Kenntnisse über Besonderheiten des Elementes erfordern.

Ist unklar, ob ein Dokument später als XHTML oder als Markierungssuppe ausgeliefert wird, so ist eine speziell eingeschränkte XML-Notation vorzunehmen:
Dabei ist ausschließlich für ein Leer-Element die Kurznotation zu verwenden, keine andere. Für andere Elemente, die auch Inhalt haben können, aber nicht müssen, ist immer die komplette Notation mit Anfangs- und Endmarkierung vorzunehmen.

Zeichen, Sonderzeichen, Kodierung

In XML und HTML kann es zu Problemen führen, wenn man im Dokument Zeichen notieren will, die verwendet werden, um Elementmarkierungen zu kennzeichnen oder um Attributwerte in Anführungszeichen einzuschließen. Daher werden in XML sogenannte Entitäten (englisch: entities) für solche Zeichen definiert, welche vom Darstellungsprogramm interpretiert und als das gewünschte Zeichen dargestellt werden.

Diese Entitäten bestehen aus einem Kürzel, das von einem Et-Zeichen (&) am Anfang und einem Semikolon am Ende umschlossen wird. Im Folgenden sind die fünf in XML – und damit auch in XHTML definierten Entitäten aufgelistet:

Sonderzeichen	Entität
<	<
>	>
'	'
"	"
&	&

Die Größer- und Kleinerzeichen müssen dabei immer als Entität im Quelltext notiert werden, sollen sie nicht als Elementbegrenzung dienen.

Anführungszeichen im Inhalt sind unproblematisch. Lediglich innerhalb von Attributwerten können sie mit den Anführungszeichen in Konflikt geraten, welche den Attributwert einschließen. Da allerdings dafür die Wahl zwischen einfachen und doppelten Anführungszeichen möglich ist, reduziert sich das Problem bereits. Eine Umschreibung als Entität ist notwendig, wenn man beide Typen notieren möchte oder einheitlich immer dieselben Anführungszeichen für die Attributwerte verwenden will.

Damit hat man sich natürlich das Problem eingehandelt, daß man nun auch immer das Zeichen & maskieren muß, um es von der Situation zu unterscheiden, daß ein maskiertes Zeichen notiert werden soll (denn es gibt weitere Möglichkeiten, auch andere Zeichen zu maskieren oder selbst solche Notationen zu definieren). Daher existiert für das Et-Zeichen ebenfalls eine Entität.

Zur Übung überlassen sei dem Leser herauszufinden, was man notiert, damit die Zeichenkette & dargestellt wird. Beim ersten Beispieldokument sollten solche Maskierungen einfach ausprobiert und angeguckt werden, was passiert, wenn sie verwendet werden und was, wenn nicht.

In älteren Versionen von (X)HTML sind zahlreiche weitere Entitäten definiert, die in der Markierungssuppen-Variante von HTML5 verwendet werden können, nicht jedoch ohne vorherige Definition in der XML-Variante. Pauschal ist heute von der Verwendung dieser einst definierten Entitäten abzuraten, lediglich die oben in der Liste sind sicher und notwendig in allen Varianten.

In allen Varianten, auch den älteren Versionen, ist es zudem möglich, die Maskierung entweder dezimal oder hexadezimal gemäß Unicode anzugeben. Das ist die Methode der Verwendung einer numerischen Entität, die anzuwenden ist, wenn es nicht gelingen will, das Zeichen einzutippen oder zu kopieren.

Eine numerische Entität beginnt immer mit der Zeichenfolge '&#' und endet mit ';'. Dazwischen steht eine Notation für die Zahl im Unicode, mit welcher das Zeichen repräsentiert wird. Dies kann entweder in hexadezimaler Notation oder in dezimaler Notation erfolgen. Bei dezimaler Notation steht zwischen Anfang und Ende einfach eine dezimale Zahl, also eine Ziffernfolge (Ziffern [0-9]) für die Zahl, die das gewünschte Zeichen repräsentiert. Bei hexadezimaler Notation folgt hinter dem '#' ein 'x' und dann eine hexadezimale Zahl, also eine Ziffernfolge (Ziffern [0-9a-fA-F]) für die Zahl, die das gewünschte Zeichen repräsentiert.

Bei Verwendung einer UTF-8-Kodierung können die allermeisten Zeichen ohnehin direkt notiert oder in den Quelltext kopiert werden, selbst wenn sie über die Tastatur nicht verfügbar sind.

Bei der Kodierung geht es darum, welche Bit-Folge im Dokument welchem Zeichen entspricht. UTF-8 ist sehr umfangreich und reicht aus, um die allermeisten bekannten Zeichen der Menschheit einschließlich vieler historischer Schriftsysteme zu kodieren. Lediglich die Eingabe mit einer typischen Tastatur kann bei alten Schriftsystemen wie den Hieroglyphen, LinearB oder der Schriften der Maya etwas mehr Aufwand erfordern.

Verschachtelung

Elemente können meist ineinander verschachtelt werden. Das heißt, andere Elemente können als Inhalt eines Elementes notiert werden. Diese Elemente heißen dann Kindelemente des Elternelementes, in welchem sie enthalten sind. Deren Kinder sind entsprechend dieser Analogie Nachfahren. Umdreht sind in der Verschachtelung-Hierarchie weiter außen liegende Elemente Vorfahren eines Elementes.

Das äußerste Element wird Wurzelelement genannt, in HTML ist dies das Element html. Es enthält folglich alle anderen Elemente als Nachfahren, hat selbst keine Vorfahren.

Inhalte eines Elementes sind typisch interpretierter Text oder andere Elemente, dazu kommen Kommentare. Interpretierter Text heißt hier, daß maskierte Zeichen, wie im Abschnitt Sonderzeichen beschrieben, vor der Präsentation in die gewünschten Zeichen umgewandelt werden. Die Werte von Attributen sind ebenfalls interpretierter Text.

Welchen Inhalt Elemente haben können, wie also verschachtelt werden darf, ist für jedes Element genau festgelegt.

Die Verschachtelung muß immer korrekt notiert werden. Wie bereits erläutert hat ein Element Markierungen und Inhalt. Die Kinder eines Elementes gehören immer komplett zum Inhalt eines Dokumentes. Es stehen keine Teile davon außerhalb der Markierungen des Elternelementes.

Zurück zu Vorwort |

Hoch zum Inhaltsverzeichnis |

Vor zu Das erste HTML-Dokument