🛡️ Entidades HTML
Codifica caracteres especiales en entidades HTML de forma segura, o decodifícalas de vuelta a texto plano.
Qué es una entidad HTML y cómo se escribe
Una entidad HTML es una secuencia de texto que representa un carácter que, escrito tal cual, el navegador interpretaría como parte de la sintaxis del propio HTML en vez de como contenido visible. Existen dos formas de escribir una entidad. La primera es la entidad con nombre, que empieza con un símbolo de ampersand (&) y termina con un punto y coma (;), por ejemplo < para representar el carácter <. La segunda es la entidad numérica, que usa el código Unicode del carácter en vez de un nombre memorizable, ya sea en base decimal como < o en base hexadecimal como <, ambas representando exactamente el mismo carácter <.
Esta herramienta hace ambas conversiones. El botón Codificar HTML toma texto plano y reemplaza cada carácter que tiene significado especial en HTML por su entidad correspondiente, dejándolo listo para mostrarse tal cual dentro de una página sin que el navegador lo malinterprete. El botón Decodificar HTML hace el camino inverso: toma un texto lleno de entidades y las convierte de vuelta a los caracteres originales, útil cuando recibes contenido ya codificado y necesitas leerlo o procesarlo como texto normal.
Qué caracteres hay que escapar y por qué
El analizador HTML de un navegador le da un significado especial a un puñado de caracteres, y por eso no pueden aparecer sueltos dentro del contenido de una página sin generar resultados inesperados. Los más importantes son estos cinco:
<marca el inicio de una etiqueta, como en<div>o<script>.>marca el cierre de una etiqueta.&marca el inicio de una entidad, incluso cuando no había intención de escribir una."delimita el valor de un atributo cuando ese atributo está escrito entre comillas dobles.'delimita el valor de un atributo cuando ese atributo está escrito entre comillas simples.
El caso más habitual donde esto genera problemas reales es al mostrar un fragmento de código dentro de una página web, algo muy común en tutoriales, documentación técnica o comentarios de blog. Si pegas literalmente <div class="tarjeta"> dentro del cuerpo de un artículo sin escaparlo, el navegador no muestra ese texto, intenta interpretarlo como una etiqueta real. El resultado es un <div> vacío e invisible incrustado en tu artículo en vez del código de ejemplo que querías que el lector viera. Para que ese fragmento aparezca como texto visible, tiene que convertirse primero en <div class="tarjeta">, que el navegador sí muestra tal cual, como texto plano, en vez de ejecutarlo como marcado.
Lo mismo pasa con un ampersand suelto. Un texto tan inocente como "Café y Bar, todo & más" contiene un carácter que el analizador intenta leer como el inicio de una entidad. Dependiendo del navegador y de lo que venga después, esto puede renderizarse de forma inconsistente o directamente romper el resto del documento. Escribirlo como "Café y Bar, todo & más" elimina cualquier ambigüedad.
Entidades con nombre frente a entidades numéricas
Tomemos el símbolo de menor que como ejemplo: se puede escribir como <, como < o como <, y las tres producen exactamente el mismo carácter < en el navegador. La diferencia entre ellas es puramente de legibilidad y de compatibilidad, no de resultado visual.
| Forma | Ejemplo | Cuándo conviene |
|---|---|---|
| Con nombre | <, &, © | Código que otras personas van a leer y mantener; el nombre explica qué carácter representa sin tener que buscarlo |
| Numérica decimal | <, © | Cuando el carácter no tiene una entidad con nombre ampliamente soportada, o cuando el HTML se genera de forma programática |
| Numérica hexadecimal | <, © | Cuando ya trabajas con el valor Unicode del carácter en hexadecimal, por ejemplo al procesar texto en un lenguaje de programación |
Las entidades con nombre existen para los caracteres más comunes, como <, >, &, © o , y son la opción más legible cuando alguien más tiene que leer tu código fuente. Sin embargo, no todos los caracteres Unicode tienen una entidad con nombre definida en el estándar HTML. Las entidades numéricas, en cambio, funcionan para cualquier carácter Unicode existente, lo que las convierte en la opción universal cuando generas HTML de forma automática desde un script, o cuando necesitas representar un carácter poco común que no tiene un nombre asignado. Por eso muchas librerías que generan HTML de forma programática prefieren la forma numérica: no tienen que mantener una tabla de nombres, solo convertir el código de carácter directamente.
Las cinco entidades predefinidas de XML y su relación con HTML
La especificación XML, de la que deriva XHTML, define exactamente cinco entidades como obligatorias para cualquier documento válido: <, >, &, " y '. Un analizador XML es estricto: si alguno de estos cinco caracteres aparece sin escapar donde no corresponde, el documento entero se considera inválido y muchos analizadores se niegan directamente a procesarlo.
HTML es bastante más permisivo. Un navegador procesando HTML normal, no XHTML, tolera un apóstrofo suelto dentro del texto del cuerpo del documento sin quejarse, porque el apóstrofo no tiene un significado sintáctico especial fuera de un atributo delimitado por comillas simples. Esa es una diferencia práctica importante: escribir un texto con un apóstrofo literal funciona perfectamente en una página HTML normal, mientras que el mismo documento interpretado como XHTML estricto técnicamente debería llevar ese apóstrofo escapado como ' para ser válido.
En la práctica, la mayoría de proyectos web modernos no generan XHTML estricto, así que estas cinco entidades funcionan como una buena práctica general más que como una obligación técnica. Aun así, seguir la regla más estricta de las cinco entidades XML, incluso al escribir HTML normal, es una forma sencilla de que tu código sea válido sin importar en qué contexto termine reutilizándose, ya sea una página HTML, un feed RSS, un archivo SVG o cualquier otro formato basado en XML.
Espacios de no ruptura y caracteres tipográficos habituales
Más allá de los caracteres reservados de la sintaxis, existe un grupo de entidades que se usa por razones puramente tipográficas: representar caracteres que son difíciles de escribir directamente desde el teclado, o que requieren un comportamiento especial en el navegador.
inserta un espacio de no ruptura, un espacio que el navegador nunca usa como punto para partir una línea. Es útil para evitar que, por ejemplo, "10 km" se corte entre el número y la unidad al final de una línea.©muestra el símbolo de copyright, ©, sin depender de que el teclado o la codificación del archivo lo soporten directamente.™muestra el símbolo de marca comercial, ™.…inserta puntos suspensivos tipográficos, …, un único carácter en vez de tres puntos sueltos.—representa la raya larga tipográfica usada en ciertos usos editoriales y en textos en inglés.–representa el guion medio tipográfico, más corto que la raya larga, usado por ejemplo en rangos numéricos como "2020–2024".
Todas estas entidades resuelven el mismo problema de fondo: hay caracteres que no están disponibles en un teclado estándar, o que dependen de que el archivo esté guardado con la codificación correcta para mostrarse bien. Escribirlos como entidades garantiza que se vean igual sin importar cómo esté configurado el editor de texto, el sistema operativo o la codificación del archivo donde vive el HTML.
Escapar en atributos frente a escapar en el texto del cuerpo
No todos los contextos dentro de un documento HTML necesitan escapar los mismos caracteres. Dentro del texto visible del cuerpo de la página, lo esencial es escapar < y &, porque son los caracteres que el analizador interpreta como el inicio de una etiqueta o de una entidad. Dentro del valor de un atributo delimitado por comillas dobles, en cambio, el carácter crítico es la comilla doble misma, porque es lo que le indica al navegador dónde termina el valor del atributo.
Un ejemplo concreto lo deja claro. Imagina un atributo title que necesita mostrar una frase con comillas dentro, algo como un tooltip que dice: la política se llama "Entrega Rápida". Si escribes ese atributo así, sin escapar nada:
<span title="la política se llama "Entrega Rápida"">pasa el mouse aquí</span>El navegador lee la primera comilla doble después de "llama" como el cierre del atributo title, dejando el resto de la frase suelta como texto inválido fuera del atributo. La forma correcta es escapar únicamente las comillas dobles internas con ":
<span title="la política se llama "Entrega Rápida"">pasa el mouse aquí</span>Ahora el navegador identifica correctamente dónde empieza y dónde termina el valor completo del atributo. Esta misma lógica se aplica a cualquier atributo que reciba texto dinámico, como alt en una imagen, placeholder en un campo de formulario o cualquier atributo data-*. Si el valor puede contener una comilla, tiene que escaparse antes de insertarse en el atributo, sin importar si el resto del texto necesita también escapar < o &.
La razón de seguridad: por qué escapar protege contra inyección de código
Escapar texto antes de mostrarlo en una página no es solo una cuestión estética, es la defensa más básica contra ataques de Cross-Site Scripting, conocidos como XSS. El problema aparece cada vez que una aplicación toma texto escrito por un usuario, como un comentario, una reseña o un campo de un formulario, y lo inserta directamente en el HTML de la página sin pasar por un proceso de escape.
Imagina un campo de comentarios de un blog que muestra el texto exactamente como lo escribió cada visitante, sin ninguna transformación. Si alguien escribe un comentario que contiene <script>robarDatos()</script>, y ese texto se inserta sin escapar en la página, el navegador de cualquier otra persona que visite esa entrada del blog no ve el texto del script, lo ejecuta como si fuera parte legítima del sitio. Dependiendo de qué haga ese script, esto puede robar cookies de sesión, redirigir a páginas fraudulentas, o modificar el contenido visible de la página para engañar a quien la visita.
La defensa es exactamente el proceso que hace esta herramienta: convertir < en < antes de insertar cualquier texto de origen externo en el HTML de una página. Con el texto correctamente escapado, ese mismo comentario aparece en pantalla como una cadena de texto inofensiva, <script>robarDatos()</script> convertido de vuelta a texto visible, en vez de ejecutarse como código. El navegador nunca llega a interpretar esos caracteres como el inicio de una etiqueta real, porque la entidad ya le indica explícitamente que se trata de texto, no de marcado.
Esta es la razón por la que prácticamente todos los frameworks modernos, desde React hasta Vue, escapan automáticamente cualquier valor dinámico que insertan en el DOM, salvo que el desarrollador use explícitamente una función marcada como insegura para insertar HTML crudo. Escapar por defecto y solo permitir HTML sin escapar de forma deliberada y consciente es la práctica estándar de la industria para evitar este tipo de vulnerabilidad.
Preguntas Frecuentes
Herramientas de Desarrollo Relacionadas
🔒 100% Privado y Seguro
Toda la codificación y decodificación HTML ocurren <strong>completamente en tu navegador</strong>. Ningún texto o código se sube jamás a ningún servidor. Tus fragmentos permanecen en tu dispositivo en todo momento.