Le contenu des éléments script et style est particulier, dans le sens où il n’appartient pas à proprement parler au contenu du document : il s’agit de blocs de code dont le traitement est délégué aux moteurs de script et de style appropriés (en très grande majorité, JavaScript et CSS). Pour des raisons historiques, cette spécificité a un impact sur le type de contenu de ces éléments et donc sur leur traitement par le parseur - l'analyseur syntaxique - du navigateur.
Cette astuce concerne les documents HTML 4.01, XHTML 1.0 et HTML5 servis en tant que text/html. Le problème ne se pose pas si vous utilisez le type MIME application/xhtml+xml.
Règles à respecter
Le contenu de ces éléments est analysé comme du texte brut, jusqu’à ce que la séquence de caractères suivante soit rencontrée : </ suivis d’une lettre (caractères a-z ou A-Z). Les entités ne sont pas prises en compte. Par exemple, ne sera pas interprété comme le caractère « Espace insécable », mais comme la suite des six caractères &, n, b, s, p et ;. Voilà pourquoi il faut écrire dans un bloc de code JavaScript if ((i < 10) && b) et non pas if ((i < 10) && b) (heureusement !).
Cela se traduit dans la spécification HTML 4.01 par un type de contenu CDATA (défini par la norme SGML) pour ces éléments. En HTML5, on parle plus explicitement de texte brut (raw text elements). Les règles à respecter pour que vos blocs de code soient correctement interprétés sont donc les suivantes :
- ne pas utiliser d’entités mais directement les caractères correspondants ;
-
ne pas utiliser les caractères
</suivis d’une lettre.
Il existe des astuces assez simples pour suivre la deuxième règle :
<script type="text/javascript">
document.write("Alsacréation<strong>s<\/strong>");
</script>
ou
<script type="text/javascript">
document.write("Alsacréation<strong>s<" + "/strong>");
</script>
Vous avez certainement déjà lu des articles préconisant l’utilisation de commentaires (X)HTML (<!-- … -->) pour encadrer le contenu des éléments script et style. Cette pratique est parfaitement inutile pour l’interprétation correcte de votre document. Mais alors, pourquoi l’utiliser ?
- Pour cacher les blocs de code aux navigateurs (antédiluviens) qui ignorent de quoi il s’agit. Cette raison n’a aujourd’hui plus aucune raison d’être.
- Pour permettre dans certains cas la validation du document : nous allons traiter ce point dans la section suivante.
Problèmes de validation en XHTML 1.0
Si vous respectez les règles définies ci-dessus, vos blocs de code ne poseront pas de problème de validation en HTML 4.01 ou HTML5. Fin de l’histoire.
En revanche, si vous utilisez un doctype XHTML 1.0 et que votre code JavaScript ou CSS contient &, < ou ]]> (ce qui arrivera plus probablement pour JavaScript que pour CSS), votre document ne validera pas.
Pourquoi ? Parce que le validateur, contrairement au parseur du navigateur, applique les règles de XML, qui ne connait pas de type de contenu équivalent à CDATA en HTML 4.01 ou texte brut en HTML5. Pour lui, script et style sont des éléments comme les autres.
Il faut trouver une solution pour satisfaire à la fois le parseur (vous voulez que vos scripts et styles soient correctement pris en compte) et le validateur (vous voulez… valider, pardi !) :
- Externalisez vos scripts et styles dans des fichiers séparés, cela vous épargnera ce problème, allègera le poids de vos pages et facilitera la maintenance de votre code.
- Si l’utilisation de code interne à la page est nécessaire ou si vous n’avez pas le choix, utilisez un commentaire (X)HTML :
<script type="text/javascript"><!--
document.write("Alsacréation<strong>s<\/strong>");
//--></script>
Les moteurs JavaScript connaissent cette pratique et ignorent une première ligne commençant par <!--. Quant au validateur, il traite le contenu de l’élément comme un commentaire XML au sein duquel les caractères spéciaux sont acceptés. Attention cependant, la séquence de caractères -- y est interdite…
Conclusion
Dans un document servi en tant que text/html, pour le contenu des éléments script et style :
- n’utilisez pas d’entités mais directement les caractères correspondants ;
-
n’utilisez pas
</suivis d’une lettre ; -
de plus, s’il s’agit d’un document XHTML 1.0 et que vous devez utiliser
&,<ou]]>, encadrez l’ensemble du contenu de l’élément correspondant par un commentaire (X)HTML, et n’utilisez pas--.