Les balises auto-fermantes (non vides) sont-elles valides en HTML5 ?

Question

El Validateur W3C ( Wikipedia ) n'aime pas les balises auto-fermantes (celles qui se terminent par " /> ") sur non-vide éléments. ( Éléments vides sont celles qui peuvent ne jamais contenir de contenu). Sont-ils toujours valables en HTML5 ?

Quelques exemples de accepté éléments vides :

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

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

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

_{<b>Note :</b><br>Le validateur du W3C accepte en fait les balises void auto-fermantes : l'auteur avait initialement un problème à cause d'une simple coquille ( <code>\></code> au lieu de <code>/></code> ) ; cependant, les balises auto-fermantes ne sont pas valides à 100% dans le HTML5 en général, et les réponses élaborent sur la question des balises auto-fermantes dans les différentes saveurs du HTML.}

Answer 1

• (Théoriquement) dans HTML 4 , <foo / (oui, sans > du tout) signifie <foo> (ce qui conduit à <br /> signification <br>> (c'est-à-dire <br>&gt; ) et <title/hello/ signification <title>hello</title> ). J'utilise le terme " théoriquement " car il s'agit d'une SGML que les navigateurs ont très mal supporté. Il y avait si peu de support (je ne l'ai vu fonctionner qu'en emacs-w3m ) que la spécification conseille aux auteurs d'éviter la syntaxe .

• En XHTML , <foo /> signifie <foo></foo> . Il s'agit d'un XML qui s'applique à tous les documents XML. Cela dit, le XHTML est souvent servi comme text/html qui (historiquement du moins) est traité par les navigateurs en utilisant un analyseur différent de celui des documents servis en tant que application/xhtml+xml . Le W3C fournit de compatibilité à suivre pour le XHTML comme text/html . (Essentiellement : N'utiliser la syntaxe des balises auto-fermantes que lorsque l'élément est défini comme EMPTY (et la balise end était 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 éléments vides (essentiellement "Un élément qui existait avant HTML5 et auquel il était interdit d'avoir un quelconque 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. Il s'agit simplement de sucre syntaxique pour les personnes (et les surligneurs de syntaxe) qui sont accros 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ébut normale. Cela se traduit généralement par l'absence d'une balise de fin, ce qui fait que les éléments suivants sont des enfants et non des frères et sœurs.
  • Les éléments étrangers (importés d'applications XML telles que SVG) le traitent comme une syntaxe auto-fermante.

Answer 2

Comme l'a souligné Nikita Skvortsov, un div qui se ferme automatiquement ne sera pas validé. Cela est dû au fait qu'un div est un élément normal et non un élément vide .

Selon la spécification HTML5 des balises qui ne peuvent pas avoir de contenu (connues sous le nom de éléments vides ) peuvent être auto-fermants*. Cela inclut les balises suivantes :

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

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

*Note : éléments étrangers peut aussi se fermer automatiquement, mais je ne pense pas que ce soit le sujet de cette réponse.

Answer 3

Dans la pratique, l'utilisation de balises auto-fermantes en HTML devrait fonctionner comme prévu. Mais si vous êtes préoccupé par l'écriture de valide HTML5, vous devez comprendre comment l'utilisation de ces balises se comporte dans les deux formes de syntaxe différentes que vous pouvez utiliser. HTML5 définit à la fois une syntaxe HTML et une syntaxe XHTML, qui sont similaires mais pas identiques. Celle qui est utilisée dépend du type de média envoyé par le serveur Web.

Il est plus que probable que vos pages soient servies en tant que text/html qui suit la syntaxe HTML plus indulgente. Dans ces cas, HTML5 permet à certaines balises de début d'avoir un / facultatif avant la terminaison >. Dans ces cas, le / est optionnel et ignoré, donc <hr> y <hr /> sont identiques. La spécification HTML appelle ces éléments "void" et donne une liste des éléments valides. Strictement parlant, l'option / n'est valide qu'à l'intérieur des balises de début de ces éléments void ; par exemple, <br /> y <hr /> sont valides en HTML5, mais <p /> ne l'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 second groupe étant tenu d'accepter toutes sortes de syntaxes "héritées" invalides. Dans le cas présent, cela signifie que les navigateurs conformes à HTML5 accepteront les balises auto-fermées illégales, telles que <p /> et les rendre comme vous vous y attendez probablement. Mais pour un auteur, cette page no être du HTML5 valide. (Plus important encore, l'arborescence DOM que vous obtenez en utilisant ce type de syntaxe illégale peut être sérieusement perturbée ; auto-fermé <span /> Les balises, par exemple, ont tendance à tout gâcher. 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 DTD XHTML et à la syntaxe XML. Cela signifie que les balises auto-fermantes sont requis pour les éléments définis comme tels).

Answer 4

Elles sont valables, mais sont interprétées différemment. Regardez ça :

<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
  <div>
    <p>
      <div/>
    </p>
  </div>
</body>
</html>

Alors qu'il est parfaitement valide en HTML4, il est invalide en HTML5. La validation se plaint de <div/> :

Syntaxe auto-fermante (/>) utilisée sur un élément HTML non vide. Ignorer le slash et le traiter comme une balise de début.

Si le div fermé le plus à l'intérieur est traité comme une balise de début, cela casse toute la structure, donc soyez prudent avec les balises fermées.

Answer 5

Les balises auto-fermantes sont valables en HTML5, mais ne sont pas obligatoires.

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