web-dev-qa-db-fra.com

L’écriture d’étiquettes à fermeture automatique pour des éléments n’est-elle généralement pas vider de mauvaise pratique?

J'ai remarqué que jQuery (ou est-ce Firefox) transformera une partie de mon <span class="presentational"></span> into <span class="presentational" />

Ma question est la suivante: est-ce correct d’écrire mon balisage comme ceci? Est-ce que des navigateurs vont s'étouffer?

Personnellement, je pense que cela semble plus propre de faire <span class="presentational" /> s'il est vide.

xmlhtml5xhtml
48
alex

Un ajout aux autres réponses: dans IE, avoir des éléments tels que <span /> dans votre balise causera toutes sortes de problèmes avec les méthodes de traversée du DOM en JavaScript . Consultez le document XHTML suivant:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <script type="text/javascript">
        function show() {
            var span = document.getElementById("span");
            alert(span.innerHTML);
        }
    </script>
</head>
<body onload="show();">
<p id="p1">Paragraph containing some text followed by
           an empty span<span id="span"/></p>
<p id="p2">Second paragraph just containing text</p>
</body>
</html>

L'idée est que lors du chargement de la page, le JavaScript obtiendra une référence à la plage vide et affichera son contenu HTML. Ce sera une chaîne vide, non? Pas dans IE ce ne sera pas le cas. Dans IE, vous obtenez tout le contenu après la fin du document:

</P>
<P id=p2>Second paragraph just containing text</P>

En outre, le deuxième <p> apparaît dans la collection childNodes de la plage. Ce même <p> est aussi dans la collection childNodes du corps, ce qui signifie un nœud peut effectivement avoir plusieurs parents . Ce n'est pas une très bonne nouvelle pour les scripts qui reposent sur le DOM.

J'ai aussi blogué à ce sujet .

19
Tim Down

Oui. Il est. Cela posera des problèmes dans certains cas pour les anciens navigateurs.

<script type='text/javascript' src='script.js' />

Dans ce cas, l'ancien navigateur peut ne pas comprendre que la balise <script> est terminée.

10
Mehrdad Afshari

Servi en tant qu'application/xhtml + xml, <span /> signifie créer un élément span sans contenu.

Servi en tant que text/html, <span /> signifie créer un élément span où le contenu de l'élément suit cette balise jusqu'à ce que la balise </ span> soit rencontrée, ou une autre balise (ou EOF) qui ferme implicitement l'élément rencontré. dans ce cas, <span /> signifie la même chose que <span>.

De plus: HTML 5 définit à la fois les sérialisations HTML et XHTML et n'affecte donc pas ce problème d'une manière ou d'une autre. Comme XHTML 1.1, il faut que XHTML soit servi en tant qu'application/xhtml + xml, contrairement à XHTML 1.0. En réalité, cela ne change rien, car tous les navigateurs traitent toute version de XHTML utilisée comme texte/html comme une balise soupe. 

3
Alohci

Voir la note sur le sujet du groupe de travail XHMTL: http://www.w3.org/TR/xhtml-media-types/

En bref, si votre XHTML doit être traité comme XHTML, c'est bien. Si vous prétendez que c'est du HTML (ce que vous devez faire si vous voulez qu'il soit chargé par Internet Explorer (y compris la version 8, la plus récente au moment de l'écriture), alors vous devez sauter à travers des cerceaux).

Les cerceaux sont suffisamment énervants pour que je recommande à la plupart des gens de s'en tenir à HTML 4.01.

2
Quentin

Il convient également de noter qu'une déclaration <?xml ...?> avant le doctype jette IE en mode quirks.

2
eyelidlessness

En règle générale, utiliser un raccourci pour les éléments vides ne pose pas de problème, mais il existe des exceptions où cela peut poser problème.

<script> est un élément important qui doit être fermé avec </script> pour éviter les problèmes.

Un autre est <meta> qui fonctionne beaucoup mieux avec les araignées écrites avec <meta></meta> au lieu de <meta />

Pas exactement la question, mais en ce qui concerne le formatage, les versions de IE ont des problèmes avec des éléments vides tels que <div></div> ou <div />. Dans ce cas, <div>&nbsp;</div> est requis pour conserver le formatage.

0
Derek H

Il devrait être explicitement indiqué qu'il n'y a pas de balises à fermeture automatique en HTML. Ainsi, chaque navigateur qui décidera de traiter votre XHTML comme du code HTML ne reconnaîtra pas que la balise est fermée. Ce n'est pas un problème pour les balises qui n'ont pas à être fermées en HTML, comme <img>, mais qui sont évidemment mauvaises avec des balises comme <span>.

0
Erich Kitzmueller