Encoder et décoder les entités HTML

Comment ça marche

Collez le texte dans le panneau de gauche ; le résultat apparaît à droite pendant que vous tapez. L'encodage réécrit les caractères qui poseraient problème dans une source HTML : « Café & Thé » devient « Café & Thé » dans la source et s'affiche toujours avec l'esperluette sur la page. La portée décide jusqu'où aller — les cinq indispensables ne touchent que les signes qui cassent la structure et laissent le texte lisible, la portée « hors ASCII » convertit tout, des accents aux symboles, quand l'encodage de la page de destination est incertain, et la portée française vise les caractères qui arrivent en points d'interrogation quand un encodage se perd : lettres accentuées, œ, guillemets « » et espace insécable. À l'encodage, seuls les noms qui existent depuis HTML 4 sont utilisés, le reste s'écrit en numérique — un vieux client e-mail doit pouvoir afficher la sortie, et il ne connaît pas les noms venus avec HTML5 ; l'apostrophe s'écrit donc ' et jamais '. Les lettres du français ont toutes un nom ancien (é à ç œ «), la sortie reste donc lisible. Le décodage fait le chemin inverse et reconnaît les trois écritures : nommée (& é  ), décimale (é) et hexadécimale (é) ; côté noms, tout le jeu défini par HTML5 est résolu. Une entité non reconnue n'est jamais supprimée : elle reste telle quelle et la ligne de résultat en donne le compte, vous gardez donc vos données et savez où regarder à la main. Cet outil ne touche pas aux balises ; pour retirer les balises et garder les mots, utilisez l'outil Convertir du HTML en texte brut. Copiez la sortie en un clic ou téléchargez-la en fichier texte.

Cet outil est aussi connu sous le nom de html escape.

Qu'est-ce que Entité HTML ?

Une entité HTML est l'écriture indirecte d'un caractère dans la source : elle commence par une esperluette, se termine par un point-virgule et porte entre les deux soit un nom (é), soit un numéro (é). Deux raisons la font exister. La première est la contrainte : le signe inférieur ouvre une balise dans la source, donc pour l'afficher comme texte il faut écrire <. La seconde est la commodité : un caractère absent du clavier ou fragile dans un encodage inconnu (€, —, œ) voyage sans risque sous cette forme. L'entité ne vit que dans la source ; au moment de dessiner la page, le navigateur la retransforme en caractère ordinaire.

Qu'est-ce que   (espace insécable) ?

Le nom vient de l'anglais non-breaking space, et deux propriétés la distinguent de l'espace ordinaire. Elle ne se coupe pas : la typographie française place une espace insécable devant ; : ! ?, à l'intérieur des guillemets « » et entre un nombre et son unité, précisément pour que la ligne ne se brise pas à ces endroits. Et elle ne se compresse pas : le HTML réduit une suite d'espaces ordinaires à une seule, alors que chaque   est conservée — les vieilles pages construisaient leurs retraits ainsi. Le caractère occupe la position 160 en Unicode et reste invisible une fois collé dans un texte, cause fréquente et déroutante de problèmes d'alignement.

Qu'est-ce que Échappement (escaping) ?

Échapper, c'est réécrire un caractère qui a un sens spécial dans son contexte pour que le système le lise comme donnée et non comme syntaxe. Chaque contexte a sa règle : en HTML le signe inférieur devient <, dans une adresse l'espace devient %20, en SQL l'apostrophe se double. Le fond est partout le même — sans échappement, le système croit le texte fini et prend la suite pour un morceau de structure. Côté HTML, les conséquences vont de la page déformée jusqu'au texte venu d'un visiteur qui se transforme en balise active ; c'est pourquoi tout texte venu de l'extérieur est échappé avant d'être posé dans une page.

Quelle différence entre échapper du HTML, retirer les balises et encoder une URL ?

Les trois transforment du texte, mais chacun applique la règle d'un contexte différent et aucun ne remplace l'autre. L'échappement de cette page travaille au niveau du caractère : les mots restent identiques, seuls les signes qui ont un sens spécial dans une source HTML sont réécrits, pour que le texte s'affiche comme du texte et non comme du balisage. L'outil Convertir du HTML en texte brut fait le chemin inverse et travaille au niveau de la structure : il écarte balises, scripts et styles et ne garde que le contenu lisible — l'entrée est du HTML, la sortie du texte pur. L'outil Encoder et décoder une URL appartient à un tout autre contexte : il réécrit les caractères interdits dans une adresse avec un signe pourcent et deux chiffres hexadécimaux, l'espace devenant %20. Un échappement HTML ne rend pas une adresse valide, et un encodage pourcent ne rend pas un texte insérable dans une page. La règle courte : insérer du texte dans une page — cette page ; extraire le texte d'une page — retirer les balises ; construire une adresse — l'encodage pourcent.

Quelle portée choisir ?

La portée n'agit qu'à l'encodage ; au décodage, toutes les entités sont reconnues quel que soit le réglage. Choisissez d'après la destination de la sortie :

• Insérer un texte venu d'un utilisateur dans une page HTML → les cinq indispensables (la structure est protégée, la lisibilité intacte)
• Un vieux gabarit d'e-mail ou un champ de CMS dont l'encodage est invérifiable → tous les caractères hors ASCII
• Une page moderne en UTF-8 que vous maîtrisez → les cinq indispensables suffisent ; encoder les accents ne fait que gonfler le fichier
• Seuls les é, è, ç sortent en points d'interrogation dans un champ précis → seulement les caractères français
• Vous écrivez du XML et non du HTML : seules cinq entités nommées y sont définies, é n'y sera pas résolu — restez sur l'écriture numérique

Nommée ou numérique ?

Un caractère a deux écritures d'entité : nommée (é) et numérique (é ou é). L'écriture numérique existe pour tout caractère et se résout partout ; l'écriture nommée est lisible, mais elle n'existe que pour les caractères de la liste — et le standard qui définit cette liste compte.

À l'encodage, cet outil n'emploie un nom que s'il existe depuis HTML 4, et écrit le reste en numérique. Pour le français, le compte est bon : é, è, à, ç, ù, ê, ë, ï, ô, û ont des noms anciens (é è à ç…), tout comme œ et æ (œ æ) et les guillemets « » (« »). Un texte français encodé s'affiche donc correctement jusque dans les clients e-mail d'un autre âge. L'apostrophe fait exception voulue : ' n'existe pas en HTML 4 et s'affiche en toutes lettres dans les vieux clients, elle est donc écrite '.

Le décodage est volontairement plus large : les noms arrivés avec HTML5 sont reconnus eux aussi, car vous ne choisissez pas le texte qu'on vous met sous les yeux. Toutes les références décimales et hexadécimales sont résolues également.

Le piège du copier-coller depuis Word : “

Le HTML sorti de vieux logiciels de bureau et de certains systèmes de gestion de contenu contient des entités numériques entre 128 et 159 : “, —, ’. En Unicode, cette plage est réservée à des caractères de contrôle invisibles ; résolue à la lettre, elle ne produit rien à l'écran, ou des losanges noirs.

Ce qui était visé, ce sont les signes typographiques du jeu Windows-1252 : “ est un guillemet double ouvrant, ” un fermant, — un tiret cadratin, ’ une apostrophe courbe. Les navigateurs appliquent cette correspondance en silence ; cet outil aussi. En décodant un texte sorti d'une vieille archive, vos guillemets et vos tirets reviennent donc en vrais signes au lieu de disparaître.

Le double encodage : échapper deux fois le même texte

L'erreur classique de l'échappement est d'encoder deux fois la même chaîne. L'esperluette devient & au premier passage ; au second, le & de cette entité est encodé à son tour et donne &. La page affiche alors les lettres & au lieu du signe.

Cela arrive généralement dans cet ordre : une valeur de formulaire est échappée à l'enregistrement, puis le moteur de gabarits échappe la sortie une seconde fois. Le symptôme se reconnaît — les visiteurs voient   ou é imprimés dans le texte. Le diagnostic est simple : décodez le texte une fois ici ; s'il reste des entités dans la sortie, le texte a été encodé deux fois et le second échappement de votre chaîne doit sauter.

Questions fréquentes

Qu'est-ce que   et en quoi diffère-t-il d'une espace normale ?

  est l'espace insécable : aussi large qu'une espace ordinaire, mais le navigateur ne coupe pas la ligne à cet endroit et plusieurs   d'affilée ne sont pas fusionnées en une seule. La typographie française s'en sert devant ; : ! ? et à l'intérieur des guillemets « », ainsi qu'entre un nombre et son unité (15 kg).

Dois-je encoder les lettres accentuées ?

Pas si votre page est en UTF-8 : é, è, ç s'écrivent directement et le fichier reste plus léger. L'encodage sert là où vous ne maîtrisez pas le jeu de caractères : vieux gabarits d'e-mail, panneaux d'administration à l'encodage figé, champs d'export limités à l'ASCII.

Cet outil supprime-t-il les balises HTML ?

Non. L'échappement travaille au niveau du caractère : à l'encodage, les chevrons des balises sont échappés eux aussi et la balise devient du texte visible ; au décodage, les balises restent telles quelles. Pour retirer les balises d'une source et ne garder que le texte, utilisez l'outil Convertir du HTML en texte brut.

Que devient une entité non reconnue ?

Elle est laissée telle quelle et comptée dans la ligne de résultat. C'est voulu : supprimer une séquence inconnue reviendrait à retirer en silence un morceau de votre texte, et la remplacer reviendrait à inventer un caractère peut-être faux.

Le texte que je colle est-il envoyé à un serveur ?

Non. L'encodage et le décodage se font entièrement dans votre navigateur ; correspondance client, note de commande ou page non publiée, rien ne quitte cette page et rien n'est enregistré.