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

668

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.

Colin Laws
quelle
2
@ Ben: Oh, sorry, ich denke du hast recht. In diesem Fall habe ich die ursprüngliche Frage falsch verstanden. Ich dachte, das OP möchte wissen, ob selbstschließende Tags in HTML5 überhaupt gültig sind. Dies bedeutet jedoch, dass er nur Tippfehler in seinem Code gemacht hat oder nicht wusste, wie man selbstschließende Tags angemessen schreibt, was Sinn macht, dass der W3C-Validator seinen Code als ungültig markiert hat.
Sk8erPeter
16
Um Zeit für zukünftige Leser zu sparen: Ja, die Syntax in der Frage ist falsch, und nein, Sie sollten sie nicht ändern. Das OP hat ausdrücklich und zu Recht erklärt, warum . Da dies zu Validierungsfehlern führte, die zu dieser Frage führten, sollte die Syntax nicht korrigiert werden.
Jordan Gray
2
Kämpfen Sie immer noch darum, in welche Richtung die Schrägstriche zeigen sollen? Komm schon.
BoltClock
3
@ BoltClock Yup, kämpft immer noch. Leute: Wenn diese Frage gestellt wurde \>, sollte sie als nutzlose Fix-My-Tippfehler-Frage geschlossen werden. Die Antworten alle Adresse />. Die />Version ist die einzig nützliche. Kümmer dich nicht darum.
Gilles 'SO - hör auf böse zu sein'
1
Dann muss die Frage umformuliert werden, da der W3C-Validator tatsächlich selbstschließende Tags akzeptiert. Es ist schwierig, die Frage so umzuformulieren, ohne ihre Integrität in Bezug auf die ursprüngliche Absicht zu beeinträchtigen. Wenn wir uns also an die Regeln von SO halten wollen, müssen wir möglicherweise Klarheit in Fragen wie dieser opfern, obwohl es den Anschein hat, dass die Bearbeitung der Frage das einzig Vernünftige ist, um das Wohl der Allgemeinheit zu fördern durchschnittlich. Wir könnten eine weitere Diskussion über Meta beginnen, wenn es viele andere Fragen zu einem ähnlichen Thema gibt.
osa

Antworten:

1238
  • 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.
QUentin
quelle
24
" ... die XML-süchtig sind. " Sie scheinen zu vermuten, dass die XML-Konformität schlecht ist. Das Endergebnis in HTML5 scheint jedoch zu sein, dass wir uns ohnehin immer noch mit spitzen Klammern auseinandersetzen müssen (dh mit den meisten Unannehmlichkeiten von XML), während es schwieriger ist, XML-basierte Tools (z. B. Template-Tools oder verschiedene Prozessoren) zu verwenden ). Selbst aus Sicht der Generierung scheint es so <object data="..." />und so, als ob und <img src="..."></src>nicht in Ordnung, während <object data="..."></object>und <img src="..." />sind, was die Werkzeugkonsistenz erschwert. Dies sieht nach einer Lose-Lose-Situation aus.
Bruno
7
@Bruno - HTML ist älter als XML. Die Bemühungen, Menschen dazu zu bringen, zu XHTML zu wechseln, schlugen fehl. Mit geben text/htmlBrowser dem Schrägstrich keine besondere Bedeutung, so dass das Einfügen keinen praktischen Zweck erfüllt. Es ist nur dazu da, es für Leute, die sich nicht aus der Gewohnheit befreien können, eher wie XML aussehen zu lassen.
Quentin
6
@ Quentin Ich bin nicht ganz anderer Meinung. Ich finde es nur ein bisschen schade, dass ein gültiges XML-Äquivalent nicht unbedingt gültiges HTML5 ist (z. B. <img ...></img>anstelle von <img ...>oder <img ... />). Da HTML5 im Allgemeinen weniger streng ist (möglicherweise, warum XHTML fehlgeschlagen ist), hätte es so etwas sehr gut tolerieren können <img ...></img>. Leider ist dies nicht der Fall, sodass ein XML-basierter Vorlagengenerator wissen muss, wie die Produktion von leeren Elementen oder selbstschließenden Elementen zu unterscheiden ist: Sie können nicht einmal eine Regel haben, um zu sagen, dass alle leeren Elemente als geschrieben werden<tag></tag> .
Bruno
3
XHTML fehlgeschlagen vor HTML 5 auch am Horizont war, und man kann nicht lange leer Elemente , da Browser - Fehlerkorrektur bilden hat , dass XHTML vordatiert Dinge tun würde , wie die Behandlung </br>als <br>so <br></br>wäre ein doppelter Zeilenumbruch. (und Abwärtskompatibilität mit schlechtem Markup (wie </br>) in der realen Welt ist eines der Designziele von HTML 5).
Quentin
1
VON W3C: Leere Elemente: Bereich, Basis, br, col, einbetten, hr, img, Eingabe, keygen, Link, Meta, Parameter, Quelle, Spur, wbr "Leere Elemente haben nur ein Start-Tag; End-Tags dürfen nicht angegeben werden für leere Elemente. " w3.org/TR/html5/syntax.html#void-elements
Fabio Nolasco
406

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.

Roter Orca
quelle
1
Die Entwicklertools von IE10 geben mir "HTML1500: Tag kann sich nicht selbst schließen. Verwenden Sie ein explizites schließendes Tag." in der Zeile <meta charset = "UTF-8" /> Irgendeine Idee, warum das so wäre?
James in Indy
Ok, ich habe herausgefunden, dass selbstschließende Tags keinen Schrägstrich haben sollten (und das Entfernen behebt meinen Fehler). Zitieren
James in Indy
Die Spezifikation hat sich geändert. Jetzt sollten "void" - oder "selbstschließende" Elemente den Schrägstrich nicht enthalten, wenn sie als HTML 5-Doctype verwendet werden. Wenn es jedoch als XHTML bereitgestellt wird, ist möglicherweise der schließende Schrägstrich erforderlich (überprüfen Sie in diesem Fall die Dokumente). In der Praxis werden Seiten normalerweise wie erwartet angezeigt, auch wenn das Schließen /enthalten ist. Dies ist jedoch nicht garantiert (dies hängt davon ab, dass der Browser den Code für Sie effektiv neu schreibt und wie beabsichtigt interpretiert.) Aus irgendeinem Grund muss Ihre Seite die HTML 5-Validierung bestehen. Sie wird möglicherweise nicht bestanden, wenn Sie Tags für ungültige Elemente schließen.
SherylHohman
In Bezug auf den Kommentar von @ SherylHohman glaube ich nicht, dass sich die Spezifikation geändert hat (oder wenn ja, hat sie sich zurück geändert). Siehe w3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) - ungültige (oder fremde) Elemente können weiterhin den Schrägstrich enthalten.
ChrisC
63

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

Michael Edenfield
quelle
31
<p /> wird als öffnendes Tag behandelt, nicht als selbst geschlossenes Tag. Das bedeutet, dass der gesamte Rest des Dokuments als innerhalb des P-Elements befindlich behandelt wird. Das ist nicht das, was ich "wahrscheinlich erwarte" und auf jeder nicht trivialen Seite ein ernstes Durcheinander hervorrufen wird.
Mhsmith
12

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.

thomasrutter
quelle
4

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

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

Nick
quelle
12
Gemäß der HTML5-Spezifikation kann die selbstschließende Syntax ( />) nicht für ein nicht ungültiges HTML-Element verwendet werden.
NaXa
2
Die Frage betraf selbstschließende Tags für nicht leere Elemente wie <p/>oder <div/>.
Thomasrutter
2
Anfangs ging es nicht speziell um nicht leere Elemente. Es war eher so, können Sie noch <... />wie in XHTML verwenden oder müssen Sie die /in HTML5 entfernen . Die Frage wurde danach mehrmals geändert.
Nick
In jedem Fall lautet die Antwort, dass der Schrägstrich ignoriert wird, wodurch Elemente zerstört werden, die nicht als ungültig deklariert wurden, aber mit ungültigen Elementen kompatibel sind.
Thomasrutter
4

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

Andreas Herde
quelle
2
Dies wird in der akzeptierten Antwort beschrieben:On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
Palec
-1

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"/>
Löwe
quelle
1
Das liegt daran, dass svg in XML geschrieben ist, nicht in HTML. Es verwendet verschiedene Parsing-Regeln
Electric Coffee