Void-Element
Ein Void-Element ist ein Element in HTML, das keine Kindknoten (d.h. verschachtelte Elemente oder Textknoten) enthalten kann. Void-Elemente haben nur ein Start-Tag; End-Tags dürfen für Void-Elemente nicht angegeben werden.
In HTML darf ein Void-Element kein End-Tag haben. Zum Beispiel ist <input type="text"></input>
ungültiges HTML. Im Gegensatz dazu können SVG- oder MathML-Elemente, die keine Kindknoten haben dürfen, ein End-Tag anstelle der XML-Selbstschlusssyntax im Start-Tag verwenden.
Die HTML, SVG- und MathML-Spezifikationen definieren sehr genau, was jedes Element enthalten darf. Daher haben einige Kombinationen von Tags keine semantische Bedeutung.
Obwohl es keine Möglichkeit gibt, ein Void-Element als ein Element mit Kindknoten zu kennzeichnen, können Kindknoten programmatisch im DOM mithilfe von JavaScript zu dem Element hinzugefügt werden. Dies ist jedoch keine gute Praxis, da das Ergebnis nicht zuverlässig ist.
Die Void-Elemente in HTML sind wie folgt:
Selbstschließende Tags
Selbstschließende Tags (<tag />
) existieren in HTML nicht.
Wenn ein abschließender /
(Schrägstrich) im Start-Tag eines HTML-Elements vorhanden ist, ignorieren HTML-Parser dieses Schrägstrichzeichen. Dies ist besonders wichtig für Elemente wie <script>
oder <ul>
, die ein End-Tag erfordern. In diesen Fällen schließt das Hinzufügen eines abschließenden Schrägstrichs im Start-Tag das Element nicht. Stattdessen wird der Schrägstrich ignoriert, und das Element wird als geöffnet behandelt, bis ein explizites End-Tag gefunden wird oder der Parser das Element basierend auf der HTML-Struktur und den Parsing-Regeln implizit schließt. Zum Beispiel wird im Fall von <div/>Some text
von Browsern dies als <div>Some text</div>
interpretiert, wobei der Schrägstrich ignoriert und das div-Element als umschließend für den folgenden Text betrachtet wird.
Einige Code-Formatter fügen jedoch das abschließende Schrägstrichzeichen in den Start-Tags von Void-Elementen hinzu, um sie XHTML-kompatibel und lesbarer zu machen. Einige Code-Formatter konvertieren beispielsweise <input type="text">
zu <input type="text" />
.
Selbstschließende Tags sind in Void-Elementen in XML, XHTML und SVG erforderlich (z.B. <circle cx="50" cy="50" r="50" />
).
In SVG und MathML dürfen Elemente, die keine Kindknoten haben können, als selbstschließend markiert werden. In solchen Fällen darf ein Element, dessen Start-Tag als selbstschließend markiert ist, kein End-Tag haben.
Hinweis:
Wenn ein abschließender /
(Schrägstrich) in einem Start-Tag direkt von einem nicht mit Anführungszeichen versehenen Attributwert — ohne Leerzeichen dazwischen — gefolgt wird, wird der Schrägstrich Teil des Attributwerts, anstatt vom Parser verworfen zu werden. Zum Beispiel führt das Markup <img src=http://www.example.com/logo.svg/>
dazu, dass das src
-Attribut den Wert http://www.example.com/logo.svg/
erhält — was die URL falsch macht.