web-dev-qa-db-fra.com

Les balises à fermeture automatique (non vides) 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-void . (Les éléments nuls sont ceux qui ne peuvent jamais contenir de contenu.) Sont-ils toujours valables en HTML5?

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

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

Quelques exemples d'éléments rejetés non-vides:

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

Note: _ le validateur du W3C accepte en fait les tags vides à fermeture automatique: l'auteur avait initialement un problème en raison d'une simple faute de frappe} _ (\> au lieu de />). Cependant, les balises à fermeture automatique ne sont pas valables à 100% dans HTML5 en général, et les réponses développent le problème des balises à fermeture automatique dans différents types de code HTML.

htmlhtml5syntaxw3c-validation
603
cdeszaq

  • Dans HTML 4, <foo / (oui, sans > du tout) signifie <foo> (ce qui conduit à <br /> qui signifie <br>> (c'est-à-dire <br>&gt;) et à <title/hello/ qui signifie <title>hello</title>). Il s'agit d'une règle SGML que les navigateurs ont très mal prise en charge, et la spécification conseille aux auteurs d'éviter la syntaxe .

  • Dans 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 utilisé comme text/html qui (historiquement au moins) est traité par les navigateurs en utilisant un analyseur différent des documents utilisés comme application/xhtml+xml. Le W3C fournit des directives de compatibilité à suivre pour XHTML en tant que text/html. (Essentiellement: utilisez uniquement la syntaxe de balise à fermeture automatique lorsque l'élément est défini comme EMPTY (et que la balise de fin était interdite dans la spécification HTML)).

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

    • Sur les éléments HTML désignés comme éléments void (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 d'autres éléments HTML, la barre oblique est une erreur, mais la récupération sur erreur obligera les navigateurs à l'ignorer et à traiter la balise comme une balise de début normale. Cela se traduira généralement par une balise de fin manquante, les éléments suivants devenant des enfants plutôt que des frères et sœurs.
    • Les éléments étrangers (importés d'applications XML telles que SVG) le traitent comme une syntaxe à fermeture automatique.
1171
Quentin

Comme Nikita Skvortsov l'a fait remarquer, une division à fermeture automatique ne sera pas validée. En effet, un div est un élément normal, pas un élément void. 

Selon la spécification HTML5 , les balises qui ne peuvent avoir aucun contenu (appelés éléments void) peuvent ê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, donc <img/> n'est pas différent de <img>, mais <img></img> est invalide.

* Remarque: éléments étrangers peuvent également être à fermeture automatique, mais je ne pense pas que cela puisse faire l'objet de cette réponse.

379
Chris Starnes

En pratique, l’utilisation de balises à fermeture automatique en HTML devrait fonctionner comme prévu. Mais si vous êtes préoccupé par l'écriture devalideHTML5, vous devez comprendre comment l'utilisation de telles 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 non identiques. Le type utilisé dépend du type de média envoyé par le serveur Web. 

Plus que probablement, vos pages sont servies en tant que text/html, qui suit la syntaxe HTML plus souple. Dans ces cas, HTML5 permet à certaines balises de début d'avoir un facultatif/avant sa fin>. Dans ces cas, le/est optionnel et ignoré, donc <hr> et <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 valable que dans les balises de début de ces éléments vides; Par exemple, <br /> et <hr /> correspondent à HTML5 valide, mais <p /> ne l’est pas.

La spécification HTML5 établit une distinction claire entre ce qui est correct pour les auteurs HTML et les développeurs de navigateurs Web, le second groupe étant tenu d'accepter tous les types de syntaxe "héritée" non valide. Dans ce cas, cela signifie que les navigateurs compatibles HTML5 acceptent les balises à fermeture automatique illégales, telles que <p />, et les affichent comme prévu. Mais pour un auteur, cette page serait pas serait valide HTML5. (Plus important encore, l’arbre DOM que vous obtenez en utilisant ce type de syntaxe illégale peut être sérieusement foiré; les balises <span /> à fermeture automatique, 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. Cela signifie que les balises à fermeture automatique sont obligatoire pour les éléments définis comme tel.)

59
Michael Edenfield

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

  • Les étiquettes à fermeture automatique sur non-void éléments comme <p/>, <div/> ne fonctionneront pas du tout. La barre oblique finale sera ignorée et sera considérée comme une balise d'ouverture. Ceci est susceptible d'entraîner des problèmes de nidification.

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

  • Les balises à fermeture automatique sur void des éléments tels que <br/> ou <img src="" alt=""/> fonctionneront , mais uniquement parce que la barre oblique de fin est ignorée et que, dans ce cas, le comportement correct est appliqué.

Le résultat est que tout ce qui fonctionnait dans votre ancien "XHTML 1.0 utilisé comme texte/html" continuera à fonctionner comme auparavant: les barres obliques de fin sur les balises non vides n'étaient pas acceptées là-bas alors que celles de fin des éléments vides fonctionnaient.

Encore une remarque: il est possible de représenter un document HTML5 en XML, et cela est parfois appelé "XHTML 5.0". Dans ce cas, les règles d'application XML et les balises à fermeture automatique seront toujours traitées. Il devra toujours être servi avec un type mime XML.

8
thomasrutter

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

<br> et <br /> conviennent tous les deux.

3
Nick

Je ferais très attention aux 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 instinct aurait été plutôt <span></span><span></span>

1
Andreas Herd

Cependant, juste pour l'enregistrement, ceci est invalide:

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

Et un slash ici le rendrait à nouveau valide:

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