Entidades HTML

Las entidades HTML son secuencias de texto que representan caracteres con significado especial en HTML o que no están disponibles en todos los teclados. Empiezan con & y terminan con ;: el navegador las sustituye por el carácter correspondiente al renderizar la página.

¿Para qué sirven?

Hay dos casos de uso distintos:

1. Escapar caracteres reservados que el navegador interpretaría como código HTML: <, >, &, " y '.
2. Insertar caracteres especiales difíciles de escribir directamente, como el símbolo del euro (€), el copyright (©) o flechas tipográficas (→).

Los caracteres más comunes

Entidades nombradas vs. numéricas

Las entidades nombradas (<, €) son más legibles. Las numéricas (<, €) siempre funcionan porque referencian directamente el codepoint Unicode. La variante hexadecimal (<) también es válida. En la práctica, con un documento UTF-8 bien declarado, solo necesitas escapar los cinco caracteres reservados del lenguaje HTML.

Escape en JavaScript

Cuando insertas contenido dinámico en el DOM mediante innerHTML, escapa siempre el texto de usuario para evitar ataques XSS:

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

La alternativa más segura es usar textContent en lugar de innerHTML: textContent nunca interpreta HTML y no requiere escape manual.

Las entidades son relevantes también al trabajar con Base64 embebido en data-URLs o con tokens JWT que aparecen en atributos HTML, ya que los caracteres +, / y = pueden necesitar codificación adicional según el contexto.

Errores comunes

• Olvidar el punto y coma final: &amp sin ; no es una entidad válida. Algunos navegadores lo toleran, pero no es un comportamiento garantizado.
• Doble escape: si ya tienes < en una cadena y la vuelves a pasar por la función de escape, obtienes <. Escapa siempre el texto original sin procesar, nunca el ya escapado.
• Usar   para maquetación: es una práctica anticuada. Para separar elementos usa margin o padding en CSS. El   solo tiene sentido cuando realmente no quieres que el navegador rompa la línea en ese punto.