Der W3C-Validator mag keine selbstschließenden Tags (die mit "/>
" enden) auf nicht-void -Elementen. (Leere Elemente sind Elemente, die möglicherweise nie Inhalt enthalten.) Sind sie in HTML5 noch gültig?
Einige Beispiele für akzeptierte void-Elemente:
<br />
<img src="" />
<input type="text" name="username" />
Einige Beispiele für abgelehnt nicht leere Elemente:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Hinweis: _ der W3C-Validator akzeptiert eigentlich void selbstschließende Tags: Der Autor hatte ursprünglich ein Problem aufgrund eines einfachen Tippfehlers (\>
statt />
). Selbstschließende Tags sind jedoch in HTML5 im Allgemeinen nicht zu 100% gültig, und die Antworten beziehen sich auf das Problem der selbstschließenden Tags in verschiedenen HTML-Varianten.
In HTML 4 bedeutet <foo /
(ja, ohne >
überhaupt) <foo>
(was zu <br />
für <br>>
(d. H. <br>>
) und <title/hello/
für <title>hello</title>
) führt. Dies ist eine SGML - Regel, die Browser sehr schlecht unterstützt haben, und die Spezifikation rät Autoren, die Syntax zu meiden.
In XHTML bedeutet <foo />
<foo></foo>
. Dies ist eine XML - Regel, die für alle XML-Dokumente gilt. Allerdings wird XHTML oft als text/html
verwendet, der (zumindest historisch) von Browsern verarbeitet wird, die einen anderen Parser verwenden als Dokumente, die als application/xhtml+xml
dienen. Das W3C enthält Kompatibilitätsrichtlinien , die für XHTML als text/html
einzuhalten sind. (Im Wesentlichen: Verwenden Sie eine selbstschließende Tag-Syntax nur, wenn das Element als EMPTY definiert ist (und das End-Tag in der HTML-Spezifikation nicht zulässig ist).
In HTML5 hängt die Bedeutung von <foo />
vom Typ des Elements ab.
Wie Nikita Skvortsov darauf hinwies, wird ein selbstschließendes Div nicht bestätigt. Dies liegt daran, dass ein div ein normales Element und kein void Element ist.
Gemäß der HTML5-Spezifikation können Tags, die keinen Inhalt haben (bekannt als void elements), selbstschließend * sein. Dies umfasst die folgenden Tags:
area, base, br, col, embed, hr, img, input,
keygen, link, meta, param, source, track, wbr
Das "/" ist bei den obigen Tags jedoch vollständig optional. Daher unterscheidet sich <img/>
nicht von <img>
, aber <img></img>
ist ungültig.
* Hinweis: fremde Elemente können auch selbstschließend sein, aber ich denke nicht, dass dies für diese Antwort in Frage kommt.
In der Praxis sollte die Verwendung von selbstschließenden Tags in HTML genau wie erwartet funktionieren. Wenn Sie jedoch Bedenken haben, valid HTML5 zu schreiben, sollten Sie wissen, wie sich die Verwendung solcher Tags in den zwei verschiedenen Syntaxformen verhält, die Sie verwenden können. HTML5 definiert sowohl eine HTML-Syntax als auch eine XHTML-Syntax, die ähnlich, aber nicht identisch sind. Welcher verwendet wird, hängt vom Medientyp ab, der vom Webserver gesendet wird.
Es ist sehr wahrscheinlich, dass Ihre Seiten als text/html
bereitgestellt werden, der der milderen HTML-Syntax folgt. In diesen Fällen können in HTML5 bestimmte Start-Tags optional sein, bevor sie beendet werden>. In diesen Fällen ist/optional und wird ignoriert, sodass <hr>
und <hr />
identisch sind. Die HTML-Spezifikation nennt diese "ungültigen Elemente" und gibt eine Liste der gültigen Elemente an. Streng genommen gilt das optionale/nur innerhalb der Start-Tags dieser ungültigen Elemente. Zum Beispiel sind <br />
und <hr />
gültiges HTML5, aber <p />
nicht.
Die HTML5-Spezifikation unterscheidet eindeutig zwischen dem, was für HTML-Autoren und für Webbrowser-Entwickler richtig ist, wobei die zweite Gruppe alle Arten ungültiger "Legacy" -Syntax akzeptieren muss. In diesem Fall bedeutet dies, dass HTML5-kompatible Browser illegale, selbst geschlossene Tags wie <p />
akzeptieren und sie wie erwartet wiedergeben. Aber für einen Autor wäre diese Seite nicht gültiges HTML5. (Was noch wichtiger ist, der DOM-Baum, den Sie durch die Verwendung dieser Art illegaler Syntax erhalten, kann ernsthaft vermasselt werden; selbst geschlossene <span />
-Tags neigen dazu, Dinge durcheinander zu bringen. Viel).
(In dem ungewöhnlichen Fall, dass Ihr Server weiß, wie XHTML-Dateien als XML-MIME-Typ gesendet werden, muss die Seite der XHTML-DTD und der XML-Syntax entsprechen. Dies bedeutet, dass selbstschließende Tags required für die als definierten Elemente sind eine solche.)
HTML5 verhält sich im Grunde so, als wäre der abschließende Schrägstrich nicht vorhanden. In HTML5-Syntax gibt es kein selbstschließendes Tag.
Selbstschließende Tags für non-void -Elemente wie <p/>
, <div/>
funktionieren überhaupt nicht. Der nachfolgende Schrägstrich wird ignoriert und als öffnende Tags behandelt. Dies führt wahrscheinlich zu Verschachtelungsproblemen.
Dies gilt unabhängig davon, ob sich Leerzeichen vor dem Schrägstrich befinden: <p />
und <div />
funktionieren aus demselben Grund nicht.
Selbstschließende Tags für void - Elemente wie <br/>
oder <img src="" alt=""/>
will funktionieren, aber nur, weil der nachfolgende Schrägstrich ignoriert wird.
Das Ergebnis ist, dass alles, was in Ihrem alten "XHTML 1.0 als Text/HTML" gedient hat, weiterhin wie zuvor funktioniert: Nachgestellte Schrägstriche auf nicht leeren Tags wurden dort ebenfalls nicht akzeptiert, während der nachstehende Schrägstrich auf leere Elemente funktionierte.
Noch eine Anmerkung: Es ist möglich, ein HTML5-Dokument als XML darzustellen, und dies wird manchmal "XHTML 5.0" genannt. In diesem Fall werden immer die Regeln von XML angewendet und selbstschließende Tags werden behandelt. Es müsste immer mit einem XML-Mime-Typ geliefert werden.
Selbstschließende Tags sind in HTML5 gültig, jedoch nicht erforderlich.
<br>
und <br />
sind beide in Ordnung.
Ich würde mit selbstschließenden Tags sehr vorsichtig sein, da dieses Beispiel zeigt:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
Mein Bauchgefühl wäre stattdessen <span></span><span></span>
gewesen
Jedoch - nur für das Protokoll - ist dies ungültig:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
Und ein Schrägstrich hier würde es wieder gültig machen:
<rect width="800" height="400" fill="#000"/>