Codificador de entidades HTML y buscador de símbolos
Herramienta para escapar HTML + lista de entidades HTML con buscador | We.Inc
Escapa y desescapa HTML en tu navegador y después busca entre 100 entidades y símbolos HTML comunes. Copia la entidad con nombre, el código numérico, el valor de content en CSS o el escape de JS con un clic.
Escapar HTML significa cambiar por entidades los caracteres que el navegador interpreta como marcado: & pasa a ser &, < pasa a ser < y > pasa a ser >. Dentro de los valores de atributos, también hay que escapar las comillas. Pega texto abajo para escaparlo o desescaparlo, o busca en la tabla de símbolos y copia cualquier entidad como nombre, número o valor CSS.
Los cinco caracteres que importan
Carácter
Entidad
Cuándo hay que escaparlo
&
Siempre en el texto, cuando podría iniciar una referencia
<
Siempre en el contenido de texto
>
Buena práctica en todas partes; obligatorio en algunos contextos
"
Dentro de valores de atributos entre comillas dobles
' o '
Dentro de valores de atributos entre comillas simples
Un conversor en ambos sentidos para bloques de texto completos, más una lista con buscador de los símbolos que la gente usa de verdad: comillas, rayas, espacios, monedas, matemáticas, flechas, letras griegas y emoji. Cada fila se copia de cuatro formas.
Pega texto o marcado en el cuadro y elige Escapar o Desescapar. El resultado se actualiza mientras escribes.
Marca Modo atributo cuando el texto vaya dentro del valor de un atributo, para que también se escapen las comillas.
Marca Codificar no ASCII si el archivo se va a guardar o enviar con una codificación distinta de UTF-8; cada letra acentuada y cada símbolo pasan a ser una referencia numérica.
Busca en la tabla por nombre, símbolo o grupo y haz clic en Nombre, Número, CSS o JS para copiar esa forma.
Escapa en el momento en que pones el texto en el HTML, no cuando lo guardas. Guardar texto ya escapado lleva más tarde a dobles escapes como &amp;.
Los frameworks como React escapan el contenido de texto por ti. Solo necesitas escapar a mano cuando construyes cadenas de HTML a mano.
Un espacio de no separación ( ) mantiene dos palabras en la misma línea, por ejemplo un número y su unidad. No uses series de ellos para maquetar; usa márgenes CSS.
En CSS, la propiedad content acepta una barra invertida y el código hexadecimal, así que una flecha a la derecha es content: "\2192". Añade un espacio tras el código si el siguiente carácter es un dígito hexadecimal.
Preguntas frecuentes
¿Qué diferencia hay entre una entidad con nombre y una numérica?
¿Sigo necesitando entidades si mi página es UTF-8?
Solo para los caracteres que tienen significado en el marcado: &, < y, dentro de los atributos, la comilla que hayas usado. Con una página UTF-8 puedes escribir directamente símbolos como €, é o →. Las entidades para estos son opcionales y sobre todo ayudan cuando un editor o un sistema de email estropea el texto no ASCII.
¿' es HTML válido?
Sí, en HTML5. No existía en HTML 4, por eso el código antiguo usa '. Los dos funcionan en todos los navegadores actuales, y la opción de escapar de esta página genera ' para la máxima compatibilidad.
¿Escapar HTML basta para evitar XSS?
Impide que el texto inyectado se convierta en marcado en el contenido normal de los elementos y en atributos entre comillas. No hace seguro un valor dentro de un bloque script, un manejador de eventos en línea, un atributo style o una URL como href, que necesitan cada uno su propia codificación o validación. Usa el escape integrado de tu framework y evita construir HTML a partir de cadenas siempre que puedas.
¿Mi texto se envía a algún sitio?
No. El escape y el desescape se ejecutan en tu navegador, y nada de lo que pegas sale de la página.
Por qué los navegadores necesitan entidades
Un parser de HTML lee < como el inicio de una etiqueta y & como el inicio de una referencia de carácter. Si el nombre de un producto o un ejemplo de código contiene esos caracteres, el navegador puede ocultar parte del texto, unirlo con la etiqueta siguiente o, en el peor caso, ejecutar marcado inyectado. Escaparlos le dice al parser que muestre el carácter en lugar de actuar sobre él.
La regla práctica: escapa &, < y > en el texto, y escapa también la comilla dentro de los valores de atributos. Todo lo demás es cuestión de comodidad o de codificación.
Entidades en CSS y JavaScript
Las entidades HTML solo funcionan en HTML. En una hoja de estilos, un carácter se escribe como una barra invertida seguida de su código hexadecimal, por eso la tabla incluye una columna CSS para iconos en pseudoelementos y viñetas personalizadas. En las cadenas de JavaScript el equivalente es \u seguido de cuatro dígitos hexadecimales, o \u{...} para caracteres más allá de U+FFFF como los emoji.
Si asignas texto con textContent en JavaScript, nunca lo escapes antes: el navegador ya lo trata como texto plano, y escaparlo mostraría la entidad literalmente.