Utiliser des séquences d’échappement dans des documents balisés et en CSS
Les séquences d’échappement permettent d’écrire des caractères dans des documents balisés en utilisant uniquement des points de code ASCII. Elles sont très pratiques quand vous ne pouvez pas saisir un caractère dont vous avez besoin ou quand vous souhaitez visualiser dans votre code un caractère invisible.
Cet article répond aux questions suivantes : comment utiliser les séquences d’échappement dans des documents balisés et en CSS ? Quand les utiliser et quand s’en passer ?
Réponse courte
En HTML, vous avez plusieurs manières d’échapper le signe euro € :
Format
Nom
€
référence de caractère numérique hexadécimale
€
référence de caractère numérique décimale
€
référence de caractère nommée
En CSS, vous pouvez utiliser l’un des formats suivants :
Format
Notes
\20AC
obligatoirement suivi d’une espace si le prochain caractère se situe dans l’intervalle a-f, A-F ou 0-9
\0020AC
obligatoirement constitué de six chiffres, éventuellement suivis d’une espace
Lorsqu’une séquence d’échappement est suivie d’une espace, celle-ci est traitée comme si elle en faisait partie intégrante. Pour que votre séquence d’échappement soit réellement suivie d’une espace après interprétation, faites-la suivre de deux espaces. Si vous devez utiliser une séquence d’échappement dans un identificateur CSS, reportez-vous à la section correspondante pour plus d’informations.
Choisir l’encodage de caractères UTF-8 pour votre page (comme nous le recommandons) vous évitera d’utiliser des séquences d’échappement. Celles-ci pourront toutefois vous être utiles pour représenter des caractères invisibles, ambigus, ou encore susceptibles d’interagir de manière indésirable avec le texte ou le code source qui les entoure.
Pour en savoir plus, poursuivez votre lecture.
Les séquences d’échappement dans les documents balisés
Une séquence d’échappement permet de représenter n’importe quel caractère Unicode en HTML, XHTML ou XML en utilisant uniquement des caractères ASCII.
Dans un document balisé, vous pouvez utiliser deux types de séquences d’échappement : les références de caractères numériques (NCR) et les références de caractères nommées. Par exemple, voici différentes manières de représenter le caractère U+00A0 ESPACE INSÉCABLE.
(Le caractère ESPACE INSÉCABLE ressemble à une espace, mais empêche un retour automatique à la ligne entre les caractères qui l’entourent. En français, il est couramment employé avant des signes de ponctuation comme le deux-points et le point d’exclamation. Ces deux signes doivent être précédés d’une espace, mais apparaitre sur la même ligne que le mot qui les précède.)
 
Une référence de caractère numérique hexadécimale. Toutes les références de caractères numériques commencent par &# et finissent par ;. Le x indique la présence d’un nombre hexadécimal qui représente la valeur de point de code d’un caractère Unicode. Le nombre hexadécimal n’est pas sensible à la casse.
<p>Vive la France !</p>
 
Une référence de caractère numérique décimale. Cette référence utilise un nombre décimal pour représenter le même point de code Unicode.
<p>Vive la France !</p>
Une référence de caractère nommée (formée à partir de quatre lettres du terme anglais Non-Breaking SPace). Ce type de séquence d’échappement est très différent. Les références de caractères nommées sont définies dans la spécification du langage de balisage. Cela signifie par exemple qu’en HTML, seul un ensemble précis de références de caractères nommées (définies dans la spécification HTML) permet de représenter des caractères. Par ailleurs, cet ensemble n’inclut qu’une petite sous-partie de l’ensemble défini pour Unicode.
Remarque : le nom est sensible à la casse. En HTML, Á représente la majuscule accentuée Á, tandis que á représente la minusculeá.
<p>Vive la France !</p>
Les chiffres du point de code
Autre point important, la valeur d’une référence de caractère numérique (comme € ou € pour le signe euro €) est interprétée en tant que caractère Unicode, quel que soit l’encodage utilisé dans votre document.
Par exemple, dans le jeu de caractères Windows-1252, les chiffres du point de code 80 correspondent au signe euro. Les personnes qui travaillent sur des contenus utilisant cet encodage font donc souvent l’erreur de représenter le signe euro à l’aide de la référence €. En HTML, cette séquence d’échappement devrait se traduire par un caractère de contrôle, puisqu’elle correspondrait au caractère situé à la position 80 du répertoire Unicode. (En réalité, dans ce cas particulier, les navigateurs ont tendance à corriger cette erreur sans la signaler. Voir les pages de test.)
Les séquences d’échappement en CSS
CSS ne représente pas les séquences d’échappement de la même manière. Les séquences d’échappement commencent par une barre oblique inverse suivie d’un nombre hexadécimal qui représente la valeur du point de code Unicode hexadécimale du caractère.
Tant qu’une séquence n’est pas suivie d’un caractère situé dans l’intervalle A–F, a–f ou 0–9, vous n’avez rien de plus à faire. Par exemple, vous pouvez écrire le mot émotion de la façon suivante.
\E9motion
En revanche, quand une séquence est suivie d’un caractère utilisable dans des nombres hexadécimaux, la fin de la séquence est difficile à identifier. Lorsque cela se produit, vous avez deux possibilités. La première consiste à faire suivre la séquence d’échappement d’une espace. Cette espace fait partie intégrante de la séquence d’échappement et disparait après interprétation du caractère. L’exemple suivant montre une manière de représenter le mot édition de sorte que le caractère d ne soit pas considéré comme partie intégrante de la séquence d’échappement.
\E9 dition
La deuxième possibilité consiste à utiliser un nombre hexadécimal à six chiffres, avec ou sans espace. Voici une autre manière d’écrire édition.
\0000E9dition
Toute espace qui suit un nombre hexadécimal est intégrée à la séquence d’échappement. Par conséquent, si vous souhaitez que votre caractère soit réellement suivi d’une espace après interprétation, vous devrez le faire suivre de deux espaces (quelle que soit la longueur du nombre hexadécimal).
Utiliser des séquences d’échappement dans des identificateurs CSS
En CSS, les identificateurs (comme les noms de classe dans les sélecteurs CSS) présentent quelques particularités. Les seuls caractères ASCII par lesquels ils peuvent commencer sont les caractères - _ et les caractères situés dans l’intervalle a-z ou A-Z. En revanche, ils peuvent sans problème commencer par un caractère non ASCII ou par une séquence d’échappement, quel qu’en soit le type.
En d’autres termes, vous ne pouvez pas faire commencer un identificateur par un chiffre ASCII situé dans l’intervalle 0-9 (ce qui ne vous empêche pas d’utiliser des chiffres après le premier caractère). Si le nom de la classe à laquelle vous souhaitez faire référence commence par un chiffre, vous devrez donc l’échapper.
Par exemple, pour sélectionner un élément HTML qui porte le nom de classe « 123 », vous devrez écrire :
.\31 23 { ... }
Comme vous pouvez le voir, l’espace sépare la séquence d’échappement du reste du nom de la classe, si bien que la fin de la séquence est clairement identifiée. Si vous aviez écrit \3123, cette séquence aurait été interprétée comme ㄣ [U+3123 LETTRE BOPOMOFO EN]. (Vous pourriez aussi écrire \00003123, puisque la séquence d’échappement en CSS s’achève après le sixième caractère qui suit la barre oblique inverse.)
Il n’est pas nécessaire d’échapper la partie « 23 » de l’identificateur, puisque les chiffres sont autorisés après la première position.
Séquences et barres obliques inverses
Vous trouverez ci-dessous toutes les manières valables d’échapper une séquence de caractères, comme ceux de la séquence de hiéroglyphes égyptiens , qui signifie « voix ».
\13322\13171\13001
\13322 \13171 \13001
\013322\013171\013001
\013322 \013171 \013001
Vous pouvez aussi utiliser la barre oblique inverse en CSS avant un caractère de syntaxe, pour éviter qu’il ne soit lu comme s’il faisait partie intégrante du code. Pour plus d’informations sur les séquences d’échappement en CSS, consultez le module consacré à la syntaxe du CSS.
Quand se passer de séquences d’échappement
Il est presque toujours préférable de choisir un encodage qui vous permet de représenter des caractères sous leur forme normale au lieu d’utiliser des références de caractères numériques ou nommées.
L’utilisation de séquences d’échappement peut compliquer la lecture et la maintenance du code source tout en augmentant considérablement la taille d’un fichier.
Les développeurs et développeuses anglophones s’imaginent souvent que les autres langues n’utilisent les caractères non ASCII que de façon occasionnelle. C’est pourtant faux.
Prenons pour exemple le passage suivant, en tchèque.
Jako efektivnější se nám jeví pořádání tzv. Road Show prostřednictvím našich autorizovaných dealerů v Čechách a na Moravě, které proběhnou v průběhu září a října.
Si vous deviez utiliser des références de caractères numériques pour tous les caractères non ASCII, ce passage serait illisible, difficile à maintenir et beaucoup plus long. Bien sûr, ce serait encore pire dans une langue qui n’utilise pas du tout l’alphabet latin.
Jako efektivnĕjší se nám jeví pořádání tzv. Road Show prostřednictvím našich autorizovaných dealerů v Čechách a na Moravě, které proběhnou v průběhu září a října.
Comme nous l’avons déjà vu, pour le texte ordinaire, les caractères sont préférables aux séquences d’échappement.
Utilisation en XHTML. Imaginons que vous utilisiez des références de caractères nommées dans un document analysé en tant que XML et que ces entités soient définies dans des fichiers externes que les outils d’analyse du XML ne lisent pas. Dans de tels cas, les références d’entités ne seront pas remplacées par les caractères correspondants. Par conséquent, si vous devez utiliser des séquences d’échappement, mieux vaut employer des références de caractères numériques ou définir dans votre document les entités nécessaires.
Si vous utilisez des références de caractères nommées définies en HTML (comme á) pour représenter des caractères en XHTML, vous devriez faire attention lorsque votre contenu est interprété à l’aide d’analyseurs syntaxiques XML et d’autres outils.
Quand utiliser des séquences d’échappement
Caractères de syntaxe. Les trois caractères ci-dessous devraient toujours apparaitre dans votre contenu sous la forme de séquences d’échappement, afin de ne pas interagir avec la syntaxe du code balisé. Ils font partie du vocabulaire de tous les documents basés sur HTML ou écrits en XML.
< (<)
> (>)
& (&)
Vous pouvez aussi représenter le guillemet droit (") à l’aide de la séquence " et l’apostrophe (') à l’aide de la séquence '. Par exemple, cette substitution est nécessaire dans le texte d’un attribut, lorsque vous devez utiliser le même type de guillemets que ceux qui entourent la valeur de l’attribut.
Caractères invisibles ou ambigus. Les séquences d’échappement ont un autre rôle particulièrement utile : elles peuvent représenter des caractères invisibles ou ambigus.
Prenons pour exemple le caractère Unicode U+200F MARQUE DROITE-À-GAUCHE. Vous pouvez utiliser ce caractère pour préciser la directionnalité dans un texte bidirectionnel (par exemple, lorsque vous utilisez l’écriture arabe ou hébraïque). Cependant, comme ce caractère n’a pas de représentation graphique, il est difficile à retrouver dans un texte. Si vous modifiez votre texte par la suite en oubliant que de telles marques s’y trouvent ou sans être capable de les retrouver, vos modifications risquent d’avoir des conséquences inattendues. À la place, vous pouvez utiliser la séquence ‏ (ou sa référence de caractère numérique équivalente, ‏) pour retrouver très facilement ces marques.
Prenons à présent un exemple de caractère ambigu : U+00A0 ESPACE INSÉCABLE. Ce type d’espace empêche un retour automatique à la ligne entre les caractères qui l’entourent, mais sa représentation graphique ne permet pas de le distinguer des autres types d’espaces. En utilisant (ou  ), vous verrez clairement où vous avez utilisé des espaces insécables dans votre texte.
Problèmes de saisie. Si votre outil d’édition ne vous permet pas de saisir facilement les caractères nécessaires, les séquences d’échappement peuvent aussi vous être utiles. Remarque : cette solution n’est pas idéale sur le long terme ou si vous devez saisir de nombreuses séquences d’échappement, car elle prend plus de temps et complexifie la maintenance. Choisissez de préférence un outil d’édition qui vous permet de saisir ces caractères sous leur forme normale. Autrement, si vous n’utilisez qu’un caractère de temps en temps, vous pouvez utiliser une table des caractères ou un sélecteur de caractères.
Lacunes d’encodage. Les séquences d’échappement permettent également de représenter les caractères non supportés par l’encodage que vous avez choisi pour votre document. Par exemple, pour représenter des caractères chinois dans un document encodé en Windows-1252. Cependant, vous devriez d’abord envisager de passer à l’encodage UTF-8, compatible avec tous les caractères dont vous avez besoin.
Utiliser des séquences d’échappement dans des attributs style
En général, mieux vaut placer les informations relatives au style dans une feuille de style externe ou à l’intérieur d’un élément style dans l’élément head de votre fichier HTML. Vous pouvez toutefois ajouter un attributstyle à un élément précis de façon occasionnelle ou temporaire. Vous pourriez donc (encore plus rarement) avoir besoin de représenter un ou plusieurs caractères dans l’attribut style à l’aide de séquences d’échappement.
Dans un attribut HTML style, vous pouvez représenter des caractères à l’aide de références de caractères numériques ou nommées ou de séquences d’échappement CSS. En revanche, vous ne pouvez employer aucune référence de caractère (qu’elle soit numérique ou nommée) dans l’élément HTML style ou dans une feuille de style externe.
Souvent, on finit par déplacer les styles déclarés dans des attributs vers l’élément style de la page ou vers une feuille de style externe. Certains scripts ou applications permettent d’ailleurs d’automatiser ce déplacement. Par conséquent, mieux vaut employer uniquement des séquences d’échappement CSS.
Par exemple, mieux vaut utiliser :
<span style="font-family: L\FC beck">...</span>
que :
<span style="font-family: Lübeck">...</span>
À propos
Pour passer en UTF-8, vous devrez sauvegarder votre fichier une nouvelle fois. L’encodage UTF-8 vous permettra d’insérer la plupart des caractères sous leur forme normale au lieu d’employer des séquences d’échappement. Cependant, modifier la déclaration d’encodage en haut de votre page ou sur votre serveur ne suffit pas à modifier l’encodage de votre document. Vous devez sauvegarder votre document une nouvelle fois en utilisant l’encodage choisi. Consultez notre article Choisir et appliquer un encodage de caractères pour comprendre la marche à suivre dans votre application.
Valeur hexadécimale ou décimale. En général, lorsque la norme Unicode mentionne ou liste des caractères, elle emploie une valeur hexadécimale. Par exemple, le point de code U+00E1 correspond à la lettre á. Compte tenu de la prévalence de cette convention, il est souvent utile (mais pas obligatoire) d’utiliser des valeurs numériques hexadécimales plutôt que des valeurs décimales dans les séquences d’échappement. Vous pouvez alors omettre les zéros au début des séquences d’échappement. Par exemple, á peut être représentée par á.
Caractères complémentaires. Les caractères complémentaires sont des caractères Unicode qui occupent des positions au-delà du Plan multilingue de base (BMP). En UTF-16, un caractère complémentaire est encodé à l’aide de deux points de code de substitution de 16 bits du BMP. Pour cette raison, ou du fait de leur expérience avec des versions antérieures de JavaScript, certaines personnes pensent que deux séquences d’échappement sont nécessaires pour représenter un caractère complémentaire. C’est faux : vous devez utiliser la valeur du point de code unique du caractère concerné. Par exemple, vous devez utiliser 𣎴 et non ��.
Esperluettes seules. Bien que les agents utilisateurs HTML fassent souvent preuve de tolérance à cet égard, vous ne devriez jamais utiliser une esperluette (&) seule dans un document HTML. Vous devriez surtout faire attention aux URI qui comportent des paramètres. Par exemple, vous devriez écrire dans votre document http://example.org/my-script.php?class=guest&name=user et non http://example.org/my-script.php?class=guest&name=user.
, qui signifie « voix ».