wake-up-neo.com

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

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.

htmlhtml5syntaxw3c-validation
591
cdeszaq

  • In HTML 4 bedeutet <foo / (ja, ohne > überhaupt) <foo> (was zu <br /> für <br>> (d. H. <br>&gt;) 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.

    • Bei HTML-Elementen, die als void elements (im Wesentlichen "ein Element, das vor HTML5 existiert hat und dessen Inhalt verboten wurde") gekennzeichnet ist, sind End-Tags einfach verboten. Der Schrägstrich am Ende des Start-Tags ist zulässig, hat aber keine Bedeutung. Es ist nur syntaktischer Zucker für Menschen (und Syntax-Highlighter), 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ären Starttag behandeln. Dies führt in der Regel zu einem fehlenden End-Tag, wodurch nachfolgende Elemente anstelle von Geschwistern zu Kindern werden.
    • Fremdelemente (importiert aus XML-Anwendungen wie SVG) behandeln sie als selbstschließende Syntax.
1171
Quentin

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.

379
Chris Starnes

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.)

59
Michael Edenfield

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.

8
thomasrutter

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

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

3
Nick

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

1
Andreas Herd

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"/>
0
Leo