Sind (nicht leere) selbstschließende Tags in HTML5 gültig?

Der W3C-Validator mag keine selbstschließenden Tags (die mit " />" enden ) für nicht leere Elemente. (Leere Elemente sind solche, die möglicherweise nie Inhalt enthalten.) Sind sie in HTML5 noch gültig?

Einige Beispiele von akzeptierte leere Elemente:

<br />
<img src="" />
<input type="text" name="username" />

Einige Beispiele von abgelehnte nicht leere Elemente:

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

Hinweis: Der W3C-Validator akzeptiert tatsächlich leere selbstschließende Tags: Der Autor hatte ursprünglich ein Problem aufgrund eines einfachen Tippfehlers (\>anstelle von/> ). Selbstschließende Tags sind jedoch in HTML5 im Allgemeinen nicht zu 100% gültig, und die Antworten beziehen sich auf das Problem selbstschließender Tags in verschiedenen HTML-Varianten.

• In HTML 4 , <foo /(ja, ohne >überhaupt) Mittel <foo>(was dazu führt, das <br />heißt <br>>(dh <br>&gt;) und <title/hello/Sinn <title>hello</title>). Dies ist eine SGML- Regel, die von Browsern nur sehr schlecht unterstützt wird, und die Spezifikation rät den Autoren, die Syntax zu vermeiden .

• In XHTML , <foo />bedeutet<foo></foo> . Dies ist eine XML- Regel, die für alle XML-Dokumente gilt. Allerdings wird XHTML häufig als solches bereitgestellt, text/htmldas (zumindest historisch) von Browsern mit einem anderen Parser als als Dokumente verarbeitet wird application/xhtml+xml. Das W3C bietet Kompatibilitätsrichtlinien für XHTML als text/html. (Im Wesentlichen: Verwenden Sie die selbstschließende Tag-Syntax nur, wenn das Element als LEER definiert ist (und das End-Tag in der HTML-Spezifikation verboten war).)

• In HTML5 <foo /> hängt die Bedeutung von von der Art des Elements ab .

  • Bei HTML-Elementen, die als ungültige Elemente bezeichnet werden (im Wesentlichen "Ein Element, das vor HTML5 vorhanden war und dessen Inhalt verboten war"), sind End-Tags einfach verboten. Der Schrägstrich am Ende des Start-Tags ist zulässig, hat jedoch keine Bedeutung. Es ist nur syntaktischer Zucker für Menschen (und Syntax-Textmarker), die von XML abhängig sind.
  • Bei anderen HTML-Elementen ist der Schrägstrich ein Fehler, aber die Fehlerbehebung führt dazu, dass Browser ihn ignorieren und das Tag als reguläres Start-Tag behandeln. Dies führt normalerweise zu einem fehlenden End-Tag, wodurch nachfolgende Elemente Kinder anstelle von Geschwistern sind.
  • Fremdelemente (aus XML-Anwendungen wie SVG importiert) behandeln es als selbstschließende Syntax.

Wie Nikita Skvortsov betonte, wird ein selbstschließender Div nicht validiert. Dies liegt daran, dass ein div ein normales Element ist , kein nichtiges Element .

Gemäß der HTML5-Spezifikation können Tags, die keinen Inhalt haben können (sogenannte void-Elemente ), sich selbst schließen *. Dies umfasst die folgenden Tags:

area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

Das "/" ist bei den oben genannten Tags jedoch völlig optional, unterscheidet sich also <img/>nicht von <img>, ist aber <img></img>ungültig.

* Hinweis: Fremdelemente können sich auch selbst schließen, 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 so funktionieren, wie Sie es erwarten. Wenn Sie jedoch Bedenken haben, gültiges HTML5 zu schreiben , sollten Sie verstehen, wie sich die Verwendung solcher Tags in den beiden 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 vom Webserver gesendeten Medientyp ab.

Höchstwahrscheinlich werden Ihre Seiten als bereitgestellt text/html, was der milderen HTML-Syntax folgt. In diesen Fällen erlaubt HTML5 bestimmten Start-Tags ein optionales /, bevor es beendet wird>. In diesen Fällen ist der / optional und ignoriert, so <hr>und <hr />identisch sind. Die HTML-Spezifikation nennt diese "ungültigen Elemente" und gibt eine Liste der gültigen Elemente an. Genau genommen ist das optionale / nur innerhalb der Start-Tags dieser void-Elemente gültig. zum Beispiel <br />und <hr />sind gültiges HTML5, aber <p />nicht.

Die HTML5-Spezifikation unterscheidet klar zwischen dem, was für HTML-Autoren und Webbrowser-Entwickler korrekt 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 akzeptieren <p />und sie so rendern, wie Sie es wahrscheinlich erwarten. Für einen Autor wäre diese Seite jedoch kein gültiges HTML5. (Noch wichtiger ist, dass der DOM-Baum, den Sie durch die Verwendung dieser Art von illegaler Syntax erhalten, ernsthaft durcheinander gebracht werden kann. Selbst geschlossene <span />Tags neigen beispielsweise dazu, die Dinge stark durcheinander zu bringen .)

(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 XML-Syntax entsprechen. Dies bedeutet, dass für die als solche definierten Elemente selbstschließende Tags erforderlich sind .)

HTML5 verhält sich grundsätzlich so, als ob der abschließende Schrägstrich nicht vorhanden wäre. In der HTML5-Syntax gibt es kein selbstschließendes Tag.

• Tags auf selbstschließenden Nicht-Leere Elemente wie <p/>, <div/>wird überhaupt nicht arbeiten. Der nachfolgende Schrägstrich wird ignoriert und als öffnende Tags behandelt. Dies führt wahrscheinlich zu Verschachtelungsproblemen.

  Dies gilt unabhängig davon, ob sich vor dem Schrägstrich Leerzeichen befinden, <p />und <div />funktioniert aus demselben Grund auch nicht.

• Selbstschließende Tags auf Leere Elementen wie <br/>oder <img src="" alt=""/> werden funktionieren, aber nur , weil der Schrägstrich wird ignoriert, und in diesem Fall , dass in dem richtigen Verhalten führen passiert.

Das Ergebnis ist, dass alles, was in Ihrem alten "XHTML 1.0 als Text / HTML" funktioniert hat, weiterhin wie zuvor funktioniert: Nachgestellte Schrägstriche auf nicht leeren Tags wurden dort ebenfalls nicht akzeptiert, während der nachfolgende Schrägstrich auf leeren Elementen funktionierte.

Noch ein Hinweis: Es ist möglich, ein HTML5-Dokument als XML darzustellen, und dies wird manchmal als "XHTML 5.0" bezeichnet. In diesem Fall gelten die XML-Regeln und selbstschließende Tags werden immer behandelt. Es müsste immer mit einem XML-MIME-Typ bereitgestellt werden.

Selbstschließende Tags sind in HTML5 gültig, aber nicht erforderlich.

<br>und <br />sind beide in Ordnung.

Ich würde mit selbstschließenden Tags sehr vorsichtig sein, wie 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 <span></span><span></span>stattdessen gewesen

Dies ist jedoch - nur für den Datensatz - 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"/>