Codificar / Decodificar entidades HTML

Las entidades HTML son códigos cortos que representan caracteres que están reservados en HTML o que son difíciles de escribir. Cada una comienza con un ampersand y termina con un punto y coma — por ejemplo &amp; es un ampersand (&), &lt; es un signo menor que (<) y &copy; es el símbolo de copyright (©). Permiten que un carácter se muestre literalmente en lugar de interpretarse como marcado, y garantizan que un símbolo se muestre correctamente aunque la codificación de caracteres de la página no lo incluya. Las encontrarás constantemente cuando escribas HTML a mano o al sanear la entrada de usuario en aplicaciones web.

Pega tu texto en el panel izquierdo y mantén el modo en Codificar. Elige qué caracteres escapar — solo los reservados (< > & " '), los reservados más todos los caracteres no ASCII, o todos — y si quieres la salida en entidades nombradas, decimales o hexadecimales. Por ejemplo, con la opción nombrada, 'Tacos & burritos <3' se convierte en 'Tacos &amp; burritos &lt;3'. El resultado aparece al instante en el panel derecho. Haz clic en Copiar y pégalo directamente en tu HTML. Todo ocurre en tu navegador — sin subir archivos, sin cuenta necesaria y sin límite en la cantidad de texto que puedes codificar.

Cambia el modo a Decodificar y pega el HTML codificado en el panel izquierdo; el texto legible aparece al instante en el derecho. La herramienta entiende entidades nombradas, decimales y hexadecimales, así que &lt;div&gt; Tom &amp; Jerry &#169; se decodifica como <div> Tom & Jerry ©. Usa el botón Intercambiar para voltear los paneles si quieres volver a codificar el resultado. El decodificador maneja tipos de entidades mixtos en la misma cadena — nombradas, decimales y hexadecimales pueden aparecer juntas y cada una se decodifica correctamente. El decodificador de FreeFormatter.com requiere enviar el formulario y recargar la página en cada conversión; esta herramienta se actualiza en tiempo real mientras escribes.

Estas son las cuatro entidades HTML más comunes. &amp; es un ampersand (&), &lt; es un signo menor que (<), &gt; es un signo mayor que (>) y &nbsp; es un espacio de no separación — un espacio que evita que el navegador divida la línea o elimine los espacios repetidos, muy útil entre un valor y su unidad, como 10&nbsp;kg para que nunca queden en líneas distintas. Debes escapar & como &amp; antes que los demás, ya que de lo contrario el propio &amp; puede interpretarse erróneamente como el inicio de una nueva entidad y causar problemas de doble codificación.

Son tres formas de escribir el mismo carácter. Una entidad nombrada usa una palabra clave fácil de recordar (&amp;); una entidad numérica decimal usa el punto de código Unicode del carácter en base 10 (&#38;); una entidad hexadecimal usa base 16 (&#x26;). Las tres producen un ampersand. Las entidades nombradas son las más legibles, pero solo unos 2.000 caracteres tienen nombres, por lo que las entidades numéricas son el recurso alternativo para todo lo demás — incluidos los emoji, donde la cara sonriente 😀 es &#128512;. Ante la duda, las entidades nombradas son las más seguras para la legibilidad. El estándar HTML5 amplió significativamente la lista de entidades nombradas respecto a HTML4; esta herramienta cubre el conjunto completo de más de 2.200 referencias de caracteres nombrados de HTML5.

Tres caracteres tienen significado especial en el contenido de la página y siempre deben escaparse: & (&amp;), < (&lt;) y > (&gt;). Dentro de los valores de atributo también debes escapar " (&quot;) y ' (&#39;). Escapa el ampersand primero, ya que de lo contrario el propio &amp; puede interpretarse como el inicio de una entidad y quedar doblemente escapado. La opción 'Reservados' del modo Codificar maneja exactamente estos cinco caracteres y deja el resto del texto intacto — ideal para sanear la entrada de formularios o la salida de plantillas sin sobrecodificar caracteres que no lo necesitan.

Las flechas más comunes son &larr; (←), &rarr; (→), &uarr; (↑), &darr; (↓) y &harr; (↔), con versiones de línea doble &lArr;, &rArr; y &hArr; (⇐ ⇒ ⇔). Para cualquier otro símbolo, utiliza la lista con búsqueda que aparece más abajo — escribe 'arrow', 'heart' o 'euro' y haz clic en el código nombrado, decimal o hexadecimal para copiarlo. La lista completa incluye puntuación, símbolos matemáticos, letras griegas, signos de moneda y cientos de caracteres especiales, actualizada al estándar de referencias de caracteres nombrados de HTML5. W3Schools solo lista unas 255 entidades; esta herramienta tiene más de 2.200.

El truco clásico en el navegador es dejar que el DOM decodifique por ti: crea un textarea desconectado, asigna la cadena de entidades a su innerHTML y lee su value. Por ejemplo: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; y entonces el.value devuelve '<b> & ©'. No existe un decodeHTMLEntities() nativo en JavaScript puro, por lo que este enfoque con el DOM — o un pequeño helper que alimenta los tokens de entidad encontrados a un textarea para que el marcado suelto no pueda escapar — es el patrón estándar. Esta herramienta hace exactamente eso, razón por la cual es segura de usar con marcado no confiable sin riesgo de XSS.

Eso es doble codificación. El texto fue escapado una vez (convirtiendo & en &amp;) y luego escapado de nuevo (convirtiendo el & de &amp; en &amp;amp;), normalmente porque un framework escapó automáticamente una salida que ya estaba escapada. Esto es común en los CMS de PHP y en algunos motores de plantillas que escapan toda la salida por defecto — Twig, Smarty y algunos hooks antiguos de WordPress lo hacen. Pega el valor en Decodificar aquí una vez para confirmar la doble codificación, y luego asegúrate de que tu plantilla marque el valor como seguro o lo escape solo una vez en el punto de salida.

Usa &copy; para ©, &reg; para ®, &trade; para ™ y &mdash; para un guión largo (—). Para un guión corto usa &ndash; (–) y para puntos suspensivos usa &hellip; (…). También puedes pegar el símbolo directamente en una página UTF-8, pero la entidad nombrada es inequívoca y sobrevive a un cambio de codificación. En una página UTF-8 (que es prácticamente todo hoy en día), pegar © directamente funciona bien. Las entidades nombradas siguen siendo la opción más segura para el correo electrónico HTML, donde las suposiciones de codificación varían entre clientes de correo como Outlook, Gmail y Apple Mail.

Es &nbsp; (numérico &#160; o &#xA0;). Un espacio de no separación mantiene dos palabras, o un valor y su unidad, en la misma línea e impide que el navegador elimine los espacios repetidos — por ejemplo Sr.&nbsp;García o 5&nbsp;km. Sin embargo, no lo uses en exceso para diseño; usa márgenes o relleno de CSS para el espaciado. Un error común es usar múltiples entidades &nbsp; para sangrar texto o crear columnas — es una mala práctica y falla cuando la página se redimensiona o se renderiza en un lector de pantalla, que lee 'espacio de no separación' en voz alta por cada una.

Sí. Las entidades nombradas distinguen entre mayúsculas y minúsculas, por lo que &amp; funciona pero &Amp; o &AMP; pueden no funcionar, y &Sigma; (Σ) es un carácter completamente diferente de &sigma; (σ). Las entidades numéricas solo son insensibles a mayúsculas en la x opcional de una entidad hexadecimal — &#xA9; y &#xa9; ambas producen ©. Ante la duda, copia el código exacto de la lista de referencia en lugar de escribirlo de memoria. Escribir mal las mayúsculas en una entidad nombrada hace que se muestre el código en bruto en lugar del símbolo, lo que es una fuente común de errores en plantillas HTML escritas a mano.

FreeFormatter.com y W3Schools ofrecen tablas de referencia de entidades HTML estáticas, pero solo puedes buscar códigos — no puedes codificar ni decodificar tu propio texto. El codificador de entidades de FreeFormatter es la alternativa más cercana, pero requiere enviar el formulario y recargar la página en cada conversión, y su lista solo cubre las entidades nombradas de HTML4. W3Schools muestra aproximadamente 255 entidades nombradas. Esta herramienta cubre el conjunto completo de referencias de caracteres nombrados de HTML5 — más de 2.200 entradas — y combina la referencia con búsqueda, un codificador y un decodificador en tiempo real todo en un mismo lugar.

Sí, el codificador, el decodificador y la lista de entidades funcionan completamente en navegadores móviles, incluidos Chrome en Android y Safari en iPhone. El diseño se adapta a pantallas más pequeñas para que los dos paneles se apilen verticalmente. Un consejo para móviles: mantén pulsada una celda de la lista de entidades para activar la opción de copia del navegador si el clic único no responde de inmediato. No se necesita descargar ninguna aplicación — la herramienta funciona como una página web estándar en cualquier navegador móvil moderno. No hay registro, no hay cuenta y no hay límites de uso en ningún dispositivo. Incluso funciona sin conexión una vez que la página ha cargado.