Quels sont tous les éléments de fermeture automatique valables dans XHTML (tels qu'implémentés par les principaux navigateurs)?
Quels sont tous les éléments à fermeture automatique valides (par exemple, <br/>) en 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 />.
Tous les navigateurs prenant en charge XHTML (Firefox, Opera, Safari, IE9 ) prennent en charge la syntaxe à fermeture automatique pour chaque élément .
<div/>, <script/>, <br></br> tout devrait bien fonctionner. Si ce n'est pas le cas, vous avez [~ # ~] html [~ # ~] avec XHTML DOCTYPE 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 de ne pas prendre en compte DOCTYPE :
Le groupe de travail HTML a discuté de cette question: il s'agissait de permettre aux anciens navigateurs (uniquement HTML) d'accepter les documents XHTML 1.0 en suivant les instructions et en les servant sous forme de texte/html. Par conséquent, les documents au format text/html doivent être traités en tant que HTML et non en 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 religieusement. Lire Comprendre HTML, XML et XHTML depuis le 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 résout le traitement des erreurs par les analyseurs HTML. Tous les liens "Valid XHTML 1.0!" Sur le Web indiquent réellement "Invalid HTML 4.01!".
Pour vérifier si vous avez du code XHTML réel ou du code HTML non valide 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>
Cela valide, et en vrai XHTML cela fonctionne parfaitement (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 quand elles ne sont pas valides.
En 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 : [emphase mienne]
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.
C'est aussi explicitement montré dans le spéc. XHTML :
Les éléments vides doivent soit avoir une balise de fin, soit la balise de début doit se terminer par
/>. Par exemple,<br/>ou<hr></hr>
Un élément sur lequel il faut être très prudent 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 au moins dans IE6. Je sais, parce que je me suis heurté à cela en fermant avec zèle tous les éléments que j'ai vus ;-)
La syntaxe à fermeture automatique fonctionne sur tous les éléments de application/xhtml + xml. Il n’est supporté par aucun élément de text/html, mais les éléments "vides" en HTML4 ou "void" en HTML5 ne portent de toute façon pas de balise de fin. Par conséquent, si vous mettez une barre oblique sur ceux-ci, la syntaxe à fermeture automatique était prise en charge.
Depuis le site de référence des écoles W :
<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 HTML specs , les éléments suivants 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 indiquait également 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 aide quelqu'un:
<base />
<basefont />
<frame />
<link />
<meta />
<area />
<br />
<col />
<hr />
<img />
<input />
<param />
Qu'en est-il de <meta> et <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 provoqueront certainement des problèmes de navigation tôt ou tard.
Ceux qui se referment naturellement, comme <br> et <img>, devrait être évident. 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/vides répertoriés dans HTML5.
Valable pour les auteurs: zone, base, br, col, commande, incorporer, source d'événements, heure, img, entrée, lien, méta, paramètre, source
Non valide pour les auteurs: basefont, bgsound, frame, spacer, wbr
En plus des quelques nouveautés en 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.)
En ce qui concerne 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 jeter un oeil aux DTD xHTML , ils sont tous listés. Voici un aperçu de toutes les principales:
<br />
<hr />
<img />
<input />
Ils sont appelés des éléments "void" en HTML 5. Ils sont listés dans le spécifications officielles W .
Un élément vide est un élément dont le modèle de contenu ne lui permet jamais d'avoir du contenu, quelles que soient les circonstances.
En date d'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), ils sont:
zone, base, br, col, incorporer, heure, img, entrée, lien, méta, paramètre, source, piste, wbr
Je ne vais pas essayer de trop travailler sur ce sujet, d'autant plus que la majorité des pages que j'écris sont soit générées, soit que la balise a un contenu. Les deux seuls qui m'aient jamais posé de problèmes en les rapprochant d'eux sont:
<title/>
Pour cela, je me suis contenté de toujours lui donner une balise de fermeture distincte, car une fois qu’elle est dans le <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 <script/> À fermeture automatique lorsque le script venait 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 <form> Car il ne s'était pas rendu compte que c'était la fin de la balise <script/>. Ainsi, lorsque je l'ai transformé en balises <script></script> Distinctes, tout a fonctionné. Pourquoi différentes dans les 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!
Un autre problème de balise à fermeture automatique pour IE est l'élément title. Lorsque IE (je viens de l'essayer dans IE7)) voit cela, il présente à l'utilisateur une page vierge. Cependant, vous "visualisez la source" et tout y est.
<title/>
À l'origine, j'avais vu cela lorsque mon XSLT a généré la balise à fermeture automatique.