HTML Entity Encoder / Decoder
Encode/decode HTML entities (&, <, >, named, numeric, hex). Full HTML5 entity set.
HTML Entity Encoder / Decoder
—Runs entirely in your browser. Your input never leaves your device.
What next?
How it works
Qué son las entidades HTML
Las entidades HTML son secuencias de texto que representan caracteres con significado estructural en HTML, o caracteres difíciles de escribir directamente. El navegador ve < y muestra <; escribes & en el código fuente y la página muestra &. Existen porque HTML usa <, >, & y " como marcadores estructurales, así que si quieres que esos caracteres se muestren en lugar de parsearse, necesitas una secuencia de escape.
Hay tres formas:
- Referencias nombradas —
<>&"'y cientos más para símbolos especiales (©,€,—) - Referencias numéricas decimales —
<para<,&para& - Referencias numéricas hexadecimales —
<para<,&para&
Las tres formas son equivalentes. Las referencias nombradas son más legibles; las numéricas son universales y funcionan aunque el parser no reconozca el nombre. La forma hexadecimal es común en output generado programáticamente porque mapea directamente a code points Unicode.
Cuándo la codificación realmente importa
Mostrar código en HTML
Si construyes un blog, sitio de documentación o un renderizador de código, cada < en un ejemplo de código debe ser < o el navegador intentará parsearlo como una etiqueta real. Copia un snippet de código en HTML sin codificar y Chrome intentará evaluar <script> como una etiqueta verdadera.
Prevención de XSS
Los ataques de cross-site scripting a menudo inyectan etiquetas <script> o event handlers como onclick="malicious()" a través del input del usuario. Cuando codificas con entidades todo lo que proviene de usuarios antes de insertarlo en HTML, los corchetes angulares y las comillas se convierten en caracteres de texto inofensivos en lugar de instrucciones para el parser.
<!-- Peligroso: input del usuario interpolado directamente -->
<p>Bienvenido, <script>alert('XSS')</script>!</p>
<!-- Seguro: codificado con entidades -->
<p>Bienvenido, <script>alert('XSS')</script>!</p>
El navegador renderiza la segunda versión como texto literal — el script nunca se ejecuta.
Matiz importante: la codificación de entidades es la defensa correcta al insertar en contexto HTML. Insertar datos del usuario en un string de JavaScript, un valor CSS o un parámetro de URL requiere un escaping diferente — la codificación de entidades sola no protege esos contextos.
Evitar la doble codificación
La doble codificación es un bug común: codificas & a &, luego codificas de nuevo y obtienes &amp;. La página renderiza & en lugar de &. Esto ocurre cuando:
- Un template escapa HTML y tú también llamas una función de codificación sobre el mismo string
- Los datos se almacenan ya codificados en la base de datos y se codifican de nuevo al renderizar
La solución: decodifica primero (o verifica si el input ya está codificado), luego codifica una sola vez en el punto final de inserción en HTML.
Referencias nombradas vs numéricas: cuándo elegir cada una
Usa referencias nombradas para archivos HTML mantenidos manualmente — © y — son mucho más legibles que © y —. Las referencias nombradas están estandarizadas en HTML5 y tienen soporte universal.
Usa referencias numéricas cuando:
- Generes HTML programáticamente y no quieras mantener una tabla de lookup
- El carácter no tenga referencia nombrada (la mayoría de caracteres Unicode por encima del conjunto HTML4 no la tienen)
- Trabajes con XML, donde solo
<>&"'están garantizadas por defecto
Usa referencias hex (&#x…) cuando trabajes directamente con code points Unicode. El code point U+1F600 (😀) se convierte en 😀 directamente.
Qué NO codificar con entidades
La codificación de entidades es solo para contexto HTML. Aplicarla en otro lugar rompe las cosas:
- Parámetros de URL — usa percent-encoding (
%26no&). Poner&en una URL da literalmente&en el query string. - Strings de JavaScript — usa
\',\"o template literals."en un string JS son los cuatro caracteres", no una comilla. - Valores CSS — CSS usa escapes Unicode como
\003C, no<. - JSON — JSON usa
\"para comillas dentro de strings; las entidades HTML no tienen significado allí.
La librería he
Esta herramienta usa he de Mathias Bynens. Cubre la lista completa de referencias de caracteres nombrados de HTML5 (más de 2000 entradas), maneja las tres formas de entidades y es correcta en edge cases que los encoders artesanales suelen omitir. Todo el procesamiento ocurre en tu navegador; nada sale de tu máquina.
Ejemplos prácticos
Codificar un snippet de código para HTML:
Input: if (a < b && c > d) { return "<br>"; }
Codificado: if (a < b && c > d) { return "<br>"; }
Decodificar un string de entidades:
Input: <script>alert("hola")</script>
Decodificado: <script>alert("hola")</script>
Privacidad
Toda la codificación y decodificación se ejecuta localmente en tu navegador. Tu input nunca se envía a nuestros servidores. La librería he es MIT-licensed y auditable en GitHub.
FAQ
¿Cuál es la diferencia entre <, < y <?
Los tres representan el mismo carácter: <. < es la referencia nombrada (más legible), < es la referencia numérica decimal y < es la referencia numérica hexadecimal. Los navegadores los manejan de forma idéntica. Las referencias nombradas son mejores para HTML escrito a mano; las formas numéricas y hex son comunes en markup generado programáticamente porque mapean directamente desde code points Unicode sin necesitar una tabla de lookup.
¿La codificación de entidades HTML previene el XSS?
Previene XSS en el contexto de contenido de texto HTML — si insertas input del usuario entre etiquetas, codificar <, >, & y " hace que el markup inyectado sea texto inofensivo. Pero no es una solución XSS universal. Si insertas datos del usuario en un string JavaScript, un atributo href, un valor CSS o un parámetro de URL, cada contexto necesita su propio escaping. La codificación de entidades aplicada en el contexto incorrecto o no hace nada o rompe tu output.
¿Qué causa la doble codificación como &amp; en una página?
La doble codificación ocurre cuando un string se codifica con entidades más de una vez. & se convierte en &, y si se codifica de nuevo se convierte en &amp;. La página entonces renderiza & en lugar de &. La solución: decodifica primero para verificar si el input ya está codificado, luego codifica exactamente una vez en el punto donde se inserta el string en HTML.
¿Por qué debo codificar manualmente si los template engines ya escapan automáticamente?
La mayoría de template engines (React JSX, Jinja2, Handlebars, Blade) escapan automáticamente por defecto. Necesitas codificación manual de entidades cuando usas dangerouslySetInnerHTML, v-html, innerHTML o cualquier API de inserción de raw HTML; cuando generas strings HTML fuera de un template engine; cuando escribes HTML estático a mano; o cuando sanitizas contenido de un editor de rich text.
¿Puedo usar entidades HTML dentro de una URL?
No. Las URLs usan percent-encoding, no entidades HTML. En https://example.com/?q=a&b=c, el & es un delimitador de URL y debe ser %26 si es dato literal. Si pones & en una URL, los navegadores lo interpretan como el string de cuatro caracteres &, no como &. Usa URL encoding para query strings y HTML encoding para atributos HTML — son capas que se combinan, no son intercambiables.
¿Mi input se envía a un servidor?
No. Toda la codificación y decodificación se ejecuta en tu navegador usando la librería he. Nada se transmite. Puedes verificarlo abriendo la pestaña de red mientras usas la herramienta — no hay solicitudes salientes.
¿Qué caracteres codifica esta herramienta?
Por defecto codifica los cinco caracteres con significado estructural en HTML: &, <, >, ", '. Con la opción "codificar todos los no-ASCII", cada carácter fuera del rango ASCII (code points > 127) también se emite como referencia numérica — útil cuando necesitas output puramente ASCII, como al embeber HTML en sistemas que no manejan UTF-8 de forma confiable.
¿Por qué algunas entidades nombradas no necesitan punto y coma?
El HTML antiguo (antes de HTML5) permitía ciertas referencias nombradas sin el punto y coma final — & a veces era aceptado junto con &. Los parsers modernos aún toleran la omisión por compatibilidad hacia atrás, pero es técnicamente malformado. Siempre incluye el punto y coma en código nuevo; la librería he decodifica ambas formas pero siempre emite la forma correcta con punto y coma.