Encodeur / Décodeur d’entités HTML

Une entité HTML est un code court qui représente un caractère réservé en HTML ou difficile à saisir. Elle commence par une esperluette et se termine par un point-virgule — par exemple &amp; représente une esperluette (&), &lt; représente un signe inférieur (<) et &copy; représente le symbole de copyright (©). Elles permettent d'afficher littéralement un caractère au lieu qu'il soit interprété comme du balisage, et garantissent qu'un symbole s'affiche correctement même si l'encodage de la page ne le prend pas en charge. Vous les rencontrerez constamment en écrivant du HTML à la main ou en assainissant les saisies utilisateur dans des applications web.

Collez votre texte dans le panneau de gauche et laissez le mode sur Encoder. Choisissez les caractères à échapper — uniquement les caractères réservés (< > & " '), les réservés plus tous les caractères non-ASCII, ou tout — et si vous souhaitez une sortie nommée, décimale ou hexadécimale. Par exemple, avec l'option nommée, « Poisson & frites <3 » devient « Poisson &amp; frites &lt;3 ». Le résultat s'affiche instantanément à droite. Cliquez sur Copier et collez directement dans votre HTML. Tout se passe dans votre navigateur — aucun téléchargement de fichier, aucun compte requis, et aucune limite sur la quantité de texte à encoder.

Passez le mode sur Décoder et collez le HTML encodé dans le panneau de gauche ; le texte lisible apparaît instantanément à droite. L'outil comprend les entités nommées, décimales et hexadécimales, donc &lt;div&gt; Tom &amp; Jerry &#169; se décode en <div> Tom & Jerry ©. Utilisez le bouton Inverser pour permuter les panneaux si vous souhaitez ré-encoder le résultat. Le décodeur gère les types d'entités mixtes dans une même chaîne — nommées, décimales et hexadécimales peuvent coexister et se décodent chacune correctement. L'encodeur d'entités de FreeFormatter.com nécessite une soumission de formulaire et un rechargement de page pour chaque conversion ; cet outil se met à jour en temps réel pendant que vous tapez.

Ce sont les quatre entités HTML les plus courantes. &amp; représente une esperluette (&), &lt; un signe inférieur (<), &gt; un signe supérieur (>), et &nbsp; une espace insécable — une espace qui empêche le navigateur de couper la ligne ou de fusionner les espaces, utile entre une valeur et son unité comme 10&nbsp;kg pour qu'ils ne se séparent jamais sur deux lignes. Vous devez échapper & en &amp; avant tout autre caractère, sinon &amp; lui-même peut être mal interprété comme le début d'une nouvelle entité et provoquer un double encodage.

Ce sont trois façons d'écrire le même caractère. Une entité nommée utilise un mot-clé mémorisable (&amp;) ; une entité numérique décimale utilise le point de code Unicode du caractère en base 10 (&#38;) ; une entité hexadécimale utilise la base 16 (&#x26;). Les trois produisent une esperluette. Les entités nommées sont les plus lisibles, mais seuls environ 2 200 caractères ont des noms, donc les entités numériques sont le recours pour tout le reste — y compris les emoji, où le visage souriant 😀 est &#128512;. En cas de doute, les entités nommées sont les plus sûres pour la lisibilité. La norme HTML5 a considérablement étendu la liste des entités nommées par rapport à HTML4 ; cet outil couvre l'ensemble complet HTML5 de plus de 2 200 références de caractères nommés.

Trois caractères ont une signification particulière dans le contenu d'une page et doivent toujours être échappés : & (&amp;), < (&lt;) et > (&gt;). Dans les valeurs d'attributs, vous devez également échapper " (&quot;) et ' (&#39;). Échappez l'esperluette en premier, sinon &amp; lui-même peut être mal interprété comme le début d'une entité et être doublement échappé. L'option « Réservés » du mode Encoder gère exactement ces cinq caractères et laisse le reste de votre texte intact — idéal pour assainir les saisies de formulaire ou la sortie d'un gabarit sans sur-encoder des caractères qui n'en ont pas besoin.

Les flèches courantes sont &larr; (←), &rarr; (→), &uarr; (↑), &darr; (↓) et &harr; (↔), avec les versions à double trait &lArr;, &rArr; et &hArr; (⇐ ⇒ ⇔). Pour tout autre symbole, utilisez la liste consultable ci-dessous — tapez « flèche », « cœur » ou « euro », puis cliquez sur le code nommé, décimal ou hexadécimal pour le copier. La liste complète couvre la ponctuation, les symboles mathématiques, les lettres grecques, les signes monétaires et des centaines de caractères spéciaux, mise à jour selon la norme de référence de caractères nommés HTML5. W3Schools ne liste qu'environ 255 entités ; cet outil en propose plus de 2 200.

L'astuce classique côté navigateur consiste à laisser le DOM décoder à votre place : créez un textarea détaché, définissez son innerHTML avec la chaîne d'entités et lisez sa valeur. Par exemple : const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; puis el.value retourne '<b> & ©'. Il n'existe pas de decodeHTMLEntities() natif en JavaScript pur, donc cette approche DOM — ou un petit utilitaire qui passe les jetons d'entités correspondants à un textarea pour que le balisage parasite ne puisse pas s'échapper — est le modèle standard. Cet outil procède exactement ainsi, ce qui le rend sûr à utiliser avec du balisage non fiable sans risque de faille XSS.

Il s'agit d'un double encodage. Le texte a été échappé une fois (transformant & en &amp;), puis échappé à nouveau (transformant le & de &amp; en &amp;amp;), généralement parce qu'un framework a auto-échappé une sortie déjà échappée. Cela est courant dans les CMS PHP et certains moteurs de gabarits qui échappent toutes les sorties par défaut — Twig, Smarty et certains hooks WordPress plus anciens font tous cela. Collez la valeur dans Décoder ici une fois pour confirmer le double encodage, puis assurez-vous que votre gabarit marque la valeur comme sûre ou ne l'échappe qu'une seule fois au moment de la sortie.

Utilisez &copy; pour ©, &reg; pour ®, &trade; pour ™ et &mdash; pour un tiret cadratin (—). Pour un tiret demi-cadratin utilisez &ndash; (–) et pour des points de suspension &hellip; (…). Vous pouvez aussi coller le symbole directement dans une page UTF-8, mais l'entité nommée est sans ambiguïté et résiste à un changement d'encodage. Sur une page UTF-8 (ce qui est pratiquement universel aujourd'hui), coller © directement fonctionne très bien. Les entités nommées restent le choix le plus sûr pour les e-mails HTML où les hypothèses d'encodage varient selon les clients de messagerie comme Outlook, Gmail ou Apple Mail.

C'est &nbsp; (numérique &#160; ou &#xA0;). Une espace insécable maintient deux mots, ou une valeur et son unité, sur la même ligne et empêche le navigateur de fusionner les espaces répétées — par exemple M.&nbsp;Dupont ou 5&nbsp;km. N'en abusez pas pour la mise en page, cependant ; utilisez les marges ou le rembourrage CSS pour l'espacement à la place. Une erreur courante consiste à utiliser plusieurs entités &nbsp; pour indenter du texte ou créer des colonnes — c'est une mauvaise pratique qui se désintègre lorsque la page est redimensionnée ou lue par un lecteur d'écran, qui prononce « espace insécable » à voix haute pour chacune.

Oui. Les entités nommées sont sensibles à la casse : &amp; fonctionne mais &Amp; ou &AMP; risquent de ne pas fonctionner, et &Sigma; (Σ) est un caractère entièrement différent de &sigma; (σ). Les entités numériques ne sont insensibles à la casse que pour le x optionnel d'une entité hexadécimale — &#xA9; et &#xa9; donnent tous les deux ©. En cas de doute, copiez le code exact depuis la liste de référence ici plutôt que de le taper de mémoire. Se tromper de casse sur une entité nommée affiche le code brut au lieu du symbole, ce qui est une source fréquente de bugs dans les gabarits HTML écrits à la main.

FreeFormatter.com et W3Schools proposent tous deux des tableaux de référence d'entités HTML statiques, mais vous ne pouvez que consulter des codes — vous ne pouvez pas encoder ou décoder votre propre texte. L'encodeur d'entités de FreeFormatter est l'alternative la plus proche, mais il nécessite une soumission de formulaire et un rechargement de page pour chaque conversion, et sa liste d'entités ne couvre que les entités nommées HTML4. W3Schools affiche environ 255 entités nommées. Cet outil couvre l'ensemble complet des références de caractères nommés HTML5 — plus de 2 200 entrées — et combine la référence consultable avec un encodeur et un décodeur en direct sur une seule page, se mettant à jour en temps réel pendant que vous tapez.

Oui, l'encodeur, le décodeur et la liste d'entités fonctionnent tous entièrement sur les navigateurs mobiles, y compris Chrome sur Android et Safari sur iPhone. La mise en page s'adapte aux écrans plus petits avec les deux panneaux empilés verticalement. Un conseil pour mobile : appuyez longuement sur une cellule de la liste d'entités pour déclencher l'option de copie du navigateur si la copie en un clic ne se déclenche pas immédiatement. Aucune application à télécharger — l'outil fonctionne comme une page web standard dans tout navigateur mobile moderne. Aucune inscription, aucun compte, et aucune limite d'utilisation sur aucun appareil. Il fonctionne même hors ligne une fois la page chargée.