Cómo codificar texto en HTML
- Pega el texto, fragmento de código o contenido enviado por un usuario que quieras escapar en la caja de arriba.
- Elige un Alcance del escapado: “Solo caracteres inseguros en HTML” (el valor por defecto, solo
& < > " ') o “También todo lo no ASCII” si además quieres que las letras acentuadas, símbolos y emoji se conviertan en entidades numéricas. - Haz clic en Codificar HTML, el resultado aparece al instante, justo debajo.
- Haz clic en Copiar al portapapeles para llevarte el texto escapado, y pégalo directamente en tu código fuente HTML, plantilla o campo del CMS.
Sin archivo que elegir, sin subida, todo es una operación de un clic dentro del navegador.
¿Por qué codificar texto en HTML?
HTML le da un significado especial a un puñado de caracteres. Un < puede abrir lo que el analizador lee como una nueva etiqueta, un & puede iniciar lo que parece una referencia de entidad, y las comillas sin escapar pueden cerrar prematuramente el valor de un atributo. Si pegas texto en bruto que contiene cualquiera de estos en un documento HTML, una muestra de código en una entrada de blog, el comentario de un usuario, la descripción de un producto extraída de una hoja de cálculo, el navegador puede estropear silenciosamente el diseño, truncar el texto visible, o en el peor de los casos dejar que texto suministrado por un atacante se analice como marcado o script real (una entrada clásica de cross-site scripting). Convertir <, >, &, " y ' en sus equivalentes de entidad (<, >, &, ", ') los vuelve texto inerte y literal que siempre se renderiza exactamente como se escribió, sin importar dónde acabe en la página.
Esta es una tarea habitual para cualquiera que escriba documentación que incluya muestras de código, construya un generador de sitios estáticos o una plantilla de CMS, sanee texto enviado por usuarios antes de mostrarlo, o depure por qué un fragmento como <script> o “Tom & Jerry” se está renderizando de forma extraña dentro de un <div>. La mayoría de los lenguajes tienen una función de escapado incorporada para esto (htmlspecialchars de PHP, html.escape de Python, el auto-escapado de un motor de plantillas), pero a veces simplemente tienes un fragmento de texto a mano y quieres las entidades ahora mismo, sin abrir un editor ni escribir un script desechable.
El alcance opcional “También todo lo no ASCII” va más allá y codifica numéricamente todo lo que esté fuera del rango ASCII básico, é se convierte en é, un emoji se convierte en su propio punto de código con prefijo &#. Los documentos HTML modernos son UTF-8 por defecto y renderizan texto acentuado y emoji de forma nativa, así que la mayoría de la gente nunca necesita esto. Existe para el caso más específico de preparar contenido para un sistema antiguo, un analizador XML/XHTML estricto, o un destino cuya codificación de caracteres no puedes confiar del todo.
Tu texto nunca sale de tu dispositivo
El escapado HTML no necesita un servidor, es una operación pura de sustitución de caracteres que se ejecuta al instante en JavaScript. Algunas herramientas online de “codificador HTML” igualmente envían tu texto a través de un backend, lo cual es un riesgo innecesario si lo que pegas es documentación no publicada, código interno, o datos de usuarios que preferirías no entregar a los registros de acceso del servidor de un tercero.
Esta herramienta ejecuta la sustitución en el instante en que haces clic en el botón, usando solo el propio motor de JavaScript de tu navegador, nada se transmite, registra ni almacena, y funciona exactamente igual sin conexión una vez que la página ha cargado.
Usos habituales
- Escapar una muestra de código (que contenga
<,>,&) para que se muestre literalmente dentro de un bloque<pre>/<code>en lugar de analizarse como marcado - Sanear comentarios, reseñas o texto de formulario enviados por usuarios antes de mostrarlos de vuelta en una página
- Preparar un fragmento de texto para un campo de CMS, plantilla de generador de sitios estáticos, o cuerpo HTML de un correo
- Depurar por qué un texto que contiene
&,<o una comilla suelta se está renderizando roto o truncado en una página - Codificar numéricamente caracteres acentuados o emoji para un destino con soporte de codificación de caracteres estricto o desconocido
- Limpiar la hoja de estilos que acompaña al HTML que estás escapando, mira el complementario Minificador y Formateador CSS para minificar o embellecer CSS de la misma manera.
