Quels sont tous les éléments de fermeture automatique valables dans XHTML (tels qu'implémentés par les principaux navigateurs)?

StackOverflow https://stackoverflow.com/questions/97522

Question

Quels sont tous les éléments de fermeture automatique valides (par exemple, < br / >) dans XHTML (tel qu'implémenté par les principaux navigateurs)?

Je sais que XHTML autorise techniquement tout élément à se fermer de lui-même, mais je cherche une liste de ces éléments pris en charge par tous les principaux navigateurs. Voir http://dusan.fora.si/blog/self-closing-tags pour des exemples de problèmes causés par des éléments à fermeture automatique tels que < div / >.

Était-ce utile?

La solution

Tous les navigateurs prenant en charge XHTML (Firefox, Opera, Safari, IE9 ) prend en charge la syntaxe à fermeture automatique sur chaque élément .

<div/>, <script/>, <br></br> tout devrait bien fonctionner. Si ce n'est pas le cas, alors vous avez HTML avec DOCTYPE XHTML ajouté de manière inappropriée.

DOCTYPE ne modifie pas la façon dont le document est interprété. Seul le type MIME le fait .

Décision du W3C d'ignorer DOCTYPE :

  

Le groupe de travail HTML a abordé cette question: il s'agissait de permettre aux anciens   (HTML uniquement) pour accepter les documents XHTML 1.0 en suivant les instructions   directives, et en les servant comme text / html. Par conséquent, les documents ont servi de   text / html doit être traité comme HTML et non comme XHTML.

C’est un piège très courant, car le Validateur W3C ignore en grande partie cette règle, mais les navigateurs la suivent à la lettre. Lis   Comprendre le langage HTML, XML et XHTML à partir du blog WebKit:

  

En fait, la grande majorité des documents supposés XHTML sur Internet sont servis en tant que text/html. Ce qui signifie qu’ils ne sont pas du tout du XHTML, mais bien du HTML non valide qui & # 8217; se débrouille pour la gestion des erreurs des analyseurs HTML. Tous ces & # 8220; Valid XHTML 1.0! & # 8221; Les liens sur le Web disent en réalité & # 8220; Invalid HTML 4.01! & # 8221;.

Pour vérifier si vous avez du code XHTML réel ou du code HTML invalide avec le DOCTYPE de XHTML, mettez ceci dans votre document:

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

Il valide et fonctionne réellement en XHTML (voir: 1 vs 2 ). Si vous ne pouvez pas en croire vos yeux (ou ne savez pas comment définir les types MIME), ouvrez votre page via proxy XHTML .

Une autre façon de vérifier est de voir la source dans Firefox. Il mettra en évidence les barres obliques en rouge s’ils ne sont pas valides.

Dans HTML5 / XHTML5, cela n’a pas changé et la distinction est encore plus claire, car vous n’avez même pas de DOCTYPE supplémentaire. Content-Type est le roi.

Pour mémoire, la spécification XHTML autorise la fermeture automatique de tout élément en faisant de XHTML un application XML : [Je souligne]

  

Les balises d'élément vide peuvent être utilisées pour tout élément sans contenu , qu'il soit déclaré ou non à l'aide du mot clé EMPTY.

Cela est également explicitement indiqué dans les spécification XHTML :

  

Les éléments vides doivent posséder une balise de fin ou la balise de début doit se terminer par />. Par exemple, <br/> ou <hr></hr>

Autres conseils

Un élément avec lequel il faut être très prudent sur ce sujet est le <script > élément. Si vous avez un fichier source externe, cela causera des problèmes lorsque vous le fermez vous-même. Essayez-le:

<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />

Cela fonctionnera dans Firefox, mais cassera au moins dans IE6. Je sais, parce que je me suis heurté à cela lorsque j'ai fermé chaque élément que je voyais avec trop de zèle ;-)

La syntaxe à fermeture automatique fonctionne sur tous les éléments de application / xhtml + xml. Il n'est & # 8217; pris en charge sur aucun élément de text / html, mais sur les éléments & # 8220; vides & # 8221; en HTML4 ou & # 8220; void & # 8221; Dans HTML5, don & # 8217; ne prenez toujours pas de balise de fin. Par conséquent, si vous mettez une barre oblique sur celles-ci, elle apparaît comme si la syntaxe à fermeture automatique était prise en charge.

A partir du site de référence sur les écoles W3 :

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

La meilleure question serait: quelles balises peuvent être auto-fermées même en mode HTML sans affecter le code? Réponse: seuls ceux qui ont un contenu vide (sont nuls). Selon les spécifications HTML , ce qui suit les éléments sont nuls:

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

L'ancienne version de la spécification était également répertoriée command. En outre, selon diverses sources, les balises obsolètes ou non standard suivantes sont vides:

basefont, bgsound, frame, isindex

J'espère que cela aidera quelqu'un:

<base />
<basefont />
<frame />
<link />
<meta />

<area />
<br />
<col />
<hr />
<img />
<input />
<param />

Qu'en est-il de <meta> et de <link>? Pourquoi ne sont-ils pas sur cette liste?

En règle générale, ne fermez pas automatiquement les éléments destinés à contenir du contenu, car ils provoqueraient certainement des problèmes de navigation tôt ou tard.

Ceux qui se referment naturellement, comme <br> et <img>, devraient être évidents. Ceux qui ne le sont pas… ne les referment pas d'eux-mêmes!

La dernière fois que j'ai vérifié, voici les éléments vides / void répertoriés en HTML5.

Valable pour les auteurs: zone, base, br, col, commande, incorporer, source d'événements, hr, img, entrée, lien, méta, paramètre, source

Invalide pour les auteurs: basefont, bgsound, frame, spacer, wbr

.

Outre les nouveautés HTML5, cela devrait vous donner une idée de celles qui pourraient être prises en charge lors de l'utilisation de XHTML en tant que texte / html. (Il suffit de les tester en examinant le DOM produit.)

Comme pour le XHTML utilisé en tant qu'application / xhtml + xml (ce qui le rend XML), les règles XML s'appliquent et tout élément peut être vide (même si la DTD XHTML ne peut pas l'exprimer).

Vous devriez consulter les DTD xHTML , elles sont toutes répertoriées. . Voici un aperçu de toutes les principales:

<br />
<hr />
<img />
<input />

Ils s'appellent & "; void &"; éléments en HTML 5. Ils sont répertoriés dans la spécification officielle W3 .

  

Un élément void est un élément dont le modèle de contenu ne lui permet jamais d'avoir du contenu, quelles que soient les circonstances.

Depuis avril 2013, ils sont:

  

zone, base, br, col, commande, intégrer, hr, img, entrée, keygen, lien, méta, paramètre, source, piste, wbr

Depuis décembre 2018 (HTML 5.2), il s’agit de:

  

zone, base, br, col, incorporer, heure, img, entrée, lien, méta, paramètre, source, piste, wbr

Un autre problème de balise à fermeture automatique pour IE est l’élément title. Lorsque IE (juste essayé dans IE7) voit cela, il présente une page vierge à l'utilisateur. Cependant, vous & Quot; voir la source & Quot; et tout est là.

<title/>

Je l’ai initialement vu lorsque mon XSLT a généré la balise à fermeture automatique.

Je ne vais pas essayer de trop travailler, surtout que la majorité des pages que j'écris sont générées ou que la balise a un contenu. Les deux seuls qui m'aient jamais posé de problèmes en les rapprochant d'eux-mêmes sont:

<title/>

Pour cela, j’ai simplement choisi de toujours lui attribuer une balise de fermeture distincte, car une fois qu’elle figure dans la liste <head></head>, votre code n’est pas vraiment plus encombrant.

<script/>

C’est le grand problème avec lequel j’ai récemment rencontré des problèmes. Pendant des années, j’avais toujours utilisé des balises <form> à fermeture automatique lorsque le script provenait d’une source externe. Mais j'ai tout récemment commencé à recevoir des messages d'erreur JavaScript concernant une forme nulle. Après plusieurs jours de recherche, j’ai découvert que le problème était (supposément) que le navigateur n’atteignait jamais la balise <script></script> car il ne s’était pas rendu compte que c’était la fin de la balise <=>. Ainsi, lorsque j’ai créé des balises <=> séparées, tout a fonctionné. Pourquoi différent dans différentes pages que j'ai faites sur le même navigateur, je ne sais pas, mais ce fut un grand soulagement de trouver la solution!

< hr / > est un autre

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top