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

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

Quelques exemples d' éléments annulés acceptés :

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

Quelques exemples d' éléments non nuls rejetés :

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

_{Remarque:
Le validateur W3C accepte en fait les balises à fermeture automatique nulles: l'auteur avait à l'origine un problème à cause d'une simple faute de frappe ( \>au lieu de />); cependant, les balises à fermeture automatique ne sont pas valides à 100% en HTML5 en général, et les réponses expliquent la question des balises à fermeture automatique dans diverses versions HTML.}

• En HTML 4 , <foo /(oui, sans aucun >) signifie <foo>(ce qui conduit au <br />sens <br>>(ie <br>&gt;) et au <title/hello/sens <title>hello</title>). Il s'agit d'une règle SGML que les navigateurs ont très mal pris en charge, et la spécification conseille aux auteurs d'éviter la syntaxe .

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

• En HTML5 , la signification de <foo /> dépend du type d'élément .

  • Sur les éléments HTML qui sont désignés comme des éléments vides (essentiellement "Un élément qui existait avant HTML5 et auquel il était interdit d'avoir du contenu"), les balises de fin sont simplement interdites. La barre oblique à la fin de la balise de début est autorisée, mais n'a aucune signification. Ce n'est que du sucre syntaxique pour les personnes (et les surligneurs de syntaxe) qui sont accro au XML.
  • Sur les autres éléments HTML, la barre oblique est une erreur, mais la récupération d'erreur amènera les navigateurs à l'ignorer et à traiter la balise comme une balise de démarrage normale. Cela se terminera généralement par une balise de fin manquante, ce qui fera que les éléments suivants seront des enfants au lieu de frères et sœurs.
  • Les éléments étrangers (importés à partir d'applications XML telles que SVG) le traitent comme une syntaxe à fermeture automatique.

Comme l'a souligné Nikita Skvortsov, un div à fermeture automatique ne sera pas validé. En effet, un div est un élément normal , pas un élément vide .

Selon la spécification HTML5 , les balises qui ne peuvent pas avoir de contenu (appelées éléments vides ) peuvent se fermer automatiquement *. 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 il <img/>n'est pas différent de <img>, mais <img></img>n'est pas valide.

* Remarque: les éléments étrangers peuvent également se fermer automatiquement, mais je ne pense pas que cela soit dans la portée de cette réponse.

En pratique, l'utilisation de balises à fermeture automatique en HTML devrait fonctionner exactement comme vous vous y attendez. Mais si vous êtes préoccupé par l'écriture de HTML5 valide , vous devez comprendre comment l'utilisation de ces balises se comporte dans les deux formes de syntaxe que vous pouvez utiliser. HTML5 définit à la fois une syntaxe HTML et une syntaxe XHTML, qui sont similaires mais pas identiques. Celui qui est utilisé dépend du type de support envoyé par le serveur Web.

Plus que probablement, vos pages sont servies en tant que text/html, ce qui suit la syntaxe HTML plus clémente. Dans ces cas, HTML5 autorise certaines balises de début à avoir une option / avant de se terminer>. Dans ces cas, le / est facultatif et ignoré, <hr>et <hr />sont donc identiques. La spécification HTML appelle ces "éléments vides" et donne une liste des éléments valides. À strictement parler, l'option / n'est valide que dans les balises de début de ces éléments void; par exemple, <br />et <hr />sont HTML5 valides, mais <p />ne le sont 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 étant tenu d'accepter toutes sortes de syntaxe "héritée" non valide. Dans ce cas, cela signifie que les navigateurs compatibles HTML5 accepteront les balises auto-fermées illégales, comme <p />, et les rendront comme vous vous y attendez probablement. Mais pour un auteur, cette page ne serait pas valide en HTML5. (Plus important encore, l'arborescence DOM que vous obtenez en utilisant ce type de syntaxe illégale peut être sérieusement vissée; les <span />balises auto-fermées , par exemple, ont tendance à gâcher beaucoup les choses ).

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

HTML5 se comporte essentiellement comme si la barre oblique de fin n'était pas là. Il n'y a pas de balise à fermeture automatique dans la syntaxe HTML5.

• Les balises à fermeture automatique sur des éléments non vides comme <p/>, <div/>ne fonctionneront pas du tout. La barre oblique de fin sera ignorée et celles-ci seront traitées comme des balises d'ouverture. Cela risque d'entraîner des problèmes d'imbrication.

  Cela est vrai indépendamment du fait qu'il y ait un espace devant la barre oblique: <p />et <div />ne fonctionnera pas non plus pour la même raison.

• Étiquettes à fermeture automatique de vide des éléments tels <br/>ou <img src="" alt=""/> ne fonctionnera, mais seulement parce que le slash est ignoré, et dans ce cas qui arrive à entraîner le comportement correct.

Le résultat est que tout ce qui fonctionnait dans votre ancien "XHTML 1.0 a servi de texte / html" continuera de fonctionner comme avant: les barres obliques de fin sur les balises non-void n'y étaient pas acceptées non plus alors que la barre oblique de fin sur les éléments void fonctionnait.

Une dernière remarque: il est possible de représenter un document HTML5 en XML, et cela est parfois surnommé "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.

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

<br>et <br />sont tous les deux très bien.

Je serais très prudent avec les balises à fermeture automatique comme le montre cet exemple:

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

Mon intuition aurait été à la <span></span><span></span>place

Cependant, juste pour mémoire, ce n'est pas valide:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

Et une barre oblique ici le rendrait à nouveau valide:

    <rect width="800" height="400" fill="#000"/>