Question Les balises à fermeture automatique (non-nulles) sont-elles valides en HTML5?


le W3C validateur n'aime pas les étiquettes à fermeture automatique (celles qui se terminent par "/>") sur non-nul éléments. (Les éléments vides sont ceux qui ne contiennent aucun contenu.) Sont-ils toujours valides en HTML5?

Quelques exemples de accepté éléments vides:

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

Quelques exemples de rejeté éléments non-vides:

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

Remarque:  le validateur W3C accepte les balises à fermeture automatique: l'auteur a eu un problème à cause d'une simple faute de frappe (\> au lieu de />). Cependant, les balises à fermeture automatique ne sont pas valables à 100% en HTML5 en général, et les réponses élaborent sur la question des balises à fermeture automatique dans divers styles HTML.


564
2017-08-24 15:37


origine


Réponses:


  • Dans HTML 4, <foo / (oui, sans > du tout) signifie <foo> (qui conduit à <br /> sens <br>> (c'est à dire. <br>&gt;) et <title/hello/ sens <title>hello</title>). Les navigateurs ont fait un très mauvais travail de soutenir cela et la spécification conseille aux auteurs d'éviter la syntaxe.

  • Dans XHTML, <foo /> veux dire <foo></foo>. C'est un XML règle qui s'applique à tous les documents XML. Cela dit, XHTML est souvent servi comme text/html qui (historiquement au moins) est traité par les navigateurs utilisant un analyseur différent de celui des documents application/xhtml+xml. Le W3C fournit directives de compatibilité à suivre pour XHTML comme text/html. (Essentiellement: utilisez uniquement la syntaxe de balise à fermeture automatique lorsque l'élément est défini comme VIDE (et que la balise de fin a été interdite dans la spécification HTML)).

  • Dans HTML5, le sens de <foo />  dépend du type d'élément.

    • Sur les éléments HTML désignés comme éléments vides (essentiellement "Un élément qui existait avant HTML5 et qui était interdit d'avoir du contenu"), les balises de fin sont simplement interdites. La barre oblique à la fin de l'étiquette de début est autorisée, mais n'a aucune signification. C'est juste du sucre syntaxique pour les personnes (et les surligneurs de syntaxe) qui sont accro à XML.
    • Sur les autres éléments HTML, la barre oblique est une erreur, mais la récupération d'erreur entraînera l'ignorance des navigateurs et traitera la balise comme une balise de démarrage régulière. Cela se terminera généralement avec une balise de fin manquante, ce qui fait que les éléments suivants seront des enfants et non des frères et soeurs.
    • Les éléments étrangers (importés à partir d'applications XML telles que SVG) la traitent comme une syntaxe à fermeture automatique.

1143
2017-10-21 20:36



Comme Nikita Skvortsov l'a souligné, un div à fermeture automatique ne validera pas. C'est parce qu'un div est un élément normal, pas un élément vide. Selon la spécification HTML5, les balises qui ne peuvent avoir aucun contenu éléments vides) peut être à fermeture automatique *. Cela inclut les balises suivantes:

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

Le "/" est complètement facultatif sur les balises ci-dessus, cependant, <img/> n'est pas différent de <img>, mais <img></img> est invalide.

*Remarque: éléments étrangers peut aussi être à fermeture automatique, mais je ne pense pas que ce soit dans la portée de cette réponse.


372
2018-02-18 22:11



En pratique, l'utilisation de balises à fermeture automatique en HTML devrait fonctionner comme vous le pensiez. Mais si vous êtes préoccupé par l'écriture valide HTML5, vous devez comprendre comment l'utilisation de ces balises se comporte dans les deux différentes formes de syntaxe que vous pouvez utiliser. HTML5 définit à la fois une syntaxe HTML et une syntaxe XHTML, similaires mais non identiques. Le type utilisé dépend du type de média envoyé par le serveur Web.

Plus que probablement, vos pages sont servies comme text/html, qui suit la syntaxe HTML plus clémente. Dans ces cas, HTML5 permet à certaines balises de début d'avoir un caractère facultatif / avant qu'il ne se termine>. Dans ces cas, le / est facultatif et ignoré, donc <hr> et <hr /> sont identiques. La spécification HTML appelle ces "éléments vides", et donne une liste des éléments valides. Strictement parlant, l'option / n'est valide que dans les balises de début de ces éléments vides; par exemple, <br /> et <hr /> sont valides en HTML5, mais <p /> n'est pas.

La spécification HTML5 établit une distinction claire entre ce qui est correct pour les auteurs HTML et pour les développeurs de navigateurs Web, le deuxième groupe devant accepter toutes sortes de syntaxes «héritées» invalides. Dans ce cas, cela signifie que les navigateurs compatibles HTML5 accepteront les balises auto-fermées illégales, comme <p />et rendez-les comme vous l'attendez probablement. Mais pour un auteur, cette page serait ne pas être valide HTML5. (Plus important encore, l'arbre DOM que vous obtenez en utilisant ce type de syntaxe illégale peut être sérieusement bousillé, auto-fermé <span /> tags, par exemple, ont tendance à gâcher les choses beaucoup).

(Dans le cas inhabituel où votre serveur sait comment envoyer des fichiers XHTML en tant que type MIME XML, la page doit être conforme à la syntaxe XHTML DTD et XML. Champs obligatoires pour les éléments définis comme tels.)


58
2017-08-24 16:16



HTML5 se comporte fondamentalement comme si la barre oblique n'est pas là. Il n'existe pas de balise à fermeture automatique dans la syntaxe HTML5.

  • Balises à fermeture automatique sur non-nul des éléments comme <p/>, <div/> ne fonctionnera pas du tout. La barre oblique finale sera ignorée et sera traitée comme une balise d'ouverture. Cela risque d'entraîner des problèmes de nidification.

    Cela est vrai, qu'il y ait ou non un espace devant la barre oblique: <p /> et <div /> aussi ne fonctionnera pas pour la même raison.

  • Balises à fermeture automatique sur vide des éléments comme <br/> ou <img src="" alt=""/>  volonté travailler, mais seulement parce que la barre oblique est ignorée, et dans ce cas, cela se traduit par le comportement correct.

Le résultat est que tout ce qui a fonctionné dans votre ancien "XHTML 1.0 servi comme texte / html" continuera à fonctionner comme avant: les barres obliques finales sur les balises non-vides ne sont pas acceptées, alors que la barre oblique finale sur les éléments vides.

Une note de plus: il est possible de représenter un document HTML5 en XML, parfois appelé "XHTML 5.0". Dans ce cas, les règles de XML s'appliquent et les balises à fermeture automatique seront toujours gérées. Il devrait toujours être servi avec un type MIME XML.


7



Les balises à fermeture automatique sont valides en HTML5, mais pas obligatoires.

<br> et <br /> sont tous les deux bien.


3



Je serais très prudent avec les balises de fermeture automatique comme cet exemple démontre:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

Mon instinct aurait été <span></span><span></span> au lieu


0