Guía completa de entidades HTML

Las entidades HTML son uno de los aspectos más fundamentales pero frecuentemente mal entendidos del desarrollo web. Son el mecanismo que permite a los navegadores mostrar caracteres que de otro modo serían interpretados como marcado HTML, y juegan un papel crucial en la seguridad web. Ya sea que estés codificando caracteres especiales para prevenir ataques de cross-site scripting, mostrando símbolos matemáticos o asegurando que el contenido se renderice correctamente en diferentes codificaciones, comprender las entidades HTML es esencial.

¿Qué son las entidades HTML?

Una entidad HTML es una secuencia de caracteres que representa un solo carácter en HTML. Las entidades comienzan con un ampersand (&) y terminan con un punto y coma (;). Cuando un navegador encuentra una entidad, la reemplaza con el carácter correspondiente durante el renderizado. Este mecanismo te permite incluir caracteres en HTML que de otro modo serían imposibles o problemáticos.

<) inicia una etiqueta, el signo mayor que (>) la cierra, y el ampersand (&) inicia una referencia de entidad. Si deseas mostrar estos caracteres como contenido visible en lugar de marcado, debes codificarlos como entidades.

Entidades HTML comunes

Aunque HTML define más de 2,000 entidades nombradas, solo un puñado se utiliza con frecuencia en el desarrollo web diario. Estas son las entidades que encontrarás y usarás con más frecuencia:

Cinco entidades esenciales

Entidades de símbolos comunes

Entidades numéricas vs entidades con nombre

Las entidades HTML vienen en dos formas: nombradas y numéricas. Comprender la diferencia te ayuda a elegir la entidad correcta para cada situación.

Entidades con nombre

Las entidades nombradas utilizan palabras legibles por humanos para identificar caracteres. Por ejemplo, < representa el signo menor que, y © representa el símbolo de copyright. Las entidades nombradas son más legibles y memorables, haciendo tu código fuente HTML más mantenible. Sin embargo, las entidades nombradas solo existen para un conjunto limitado de caracteres — aproximadamente 2,000 — mientras que Unicode tiene más de 140,000 caracteres.

Entidades numéricas

Las entidades numéricas hacen referencia a caracteres por su punto de código Unicode. Vienen en dos formas: decimal y hexadecimal. Las entidades numéricas decimales utilizan el formato &#NNN;, donde NNN es el punto de código decimal. Las entidades hexadecimales utilizan el formato &#xHHH;, donde HHH es el punto de código hexadecimal. Por ejemplo, el símbolo de copyright puede escribirse como © (decimal) o © (hexadecimal).

Las entidades numéricas pueden representar cualquier carácter Unicode, haciéndolas esenciales para caracteres que no tienen referencia de entidad nombrada. Si necesitas mostrar caracteres CJK raros, glifos de escrituras históricas o emojis que carecen de entidades nombradas, debes usar la forma numérica.

Cuándo usar cada una

• Usa entidades nombradas para los cinco caracteres requeridos (&, <, >, ", ') y símbolos comunes como ©, ®, ™. Son más legibles y autodocumentadas.
• Usa entidades numéricas cuando necesites un carácter que no tiene entidad nombrada, o cuando estés generando HTML programáticamente y necesites un método de codificación consistente y universal.
• Usa entidades numéricas hexadecimales cuando trabajes con puntos de código Unicode, ya que hexadecimal es la notación estándar en la documentación y tablas de caracteres de Unicode.

Cuándo usar entidades HTML

Saber cuándo usar entidades es tan importante como saber cómo usarlas. Aquí están los principales escenarios donde las entidades son necesarias o beneficiosas:

1. Mostrar caracteres reservados

< desnudo, el navegador intentará analizarlo como el inicio de una etiqueta HTML, lo que podría romper el diseño de tu página o crear vulnerabilidades de seguridad.

2. Prevenir ambigüedad de ampersands

Un ampersand seguido de letras y un punto y coma siempre se interpreta como una referencia de entidad. Si tu contenido incluye un ampersand que no es parte de una entidad (por ejemplo, en "Tom & Jerry"), debes codificarlo como &. Un ampersand no codificado seguido de texto que coincida con un nombre de entidad será decodificado incorrectamente. Por ejemplo, "AT&T" no codificado podría convertirse en "AT&T" si "T" coincidiera con una entidad.

3. Incluir caracteres que no están en el teclado

Caracteres como guiones largos, símbolos de copyright y operadores matemáticos pueden ser difíciles de escribir en un teclado estándar. Las entidades proporcionan una forma confiable de incluir estos caracteres sin depender del método de entrada o mapa de caracteres de tu editor. Por ejemplo, — suele ser más fácil de escribir que buscar el carácter del guión largo en el teclado.

4. Espacio de no separación

La entidad   crea un espacio no separable que evita que el navegador rompa la línea en esa posición. Esto es crucial para mantener palabras relacionadas en la misma línea, como "10 kg", "Capítulo 3" o nombres de marca que no deberían dividirse entre líneas. También se usa comúnmente para crear espaciado visual en diseños donde CSS no es apropiado.

Implicaciones de seguridad: Protección XSS

La codificación de entidades HTML es una de las líneas de defensa más importantes contra los ataques de cross-site scripting (XSS). El XSS ocurre cuando un atacante puede inyectar código ejecutable en una página web vista por otros usuarios. La codificación de entidades previene esto convirtiendo caracteres peligrosos en sus equivalentes de entidad seguros.

Cómo la codificación de entidades previene XSS

Considera una página de búsqueda que muestra la consulta del usuario en el título de resultados. Si un usuario busca <script>alert("xss")</script> y la página lo renderiza sin codificar, el navegador ejecutará ese script. Sin embargo, si la salida está codificada como entidad, se convierte en &lt;script&gt;alert("xss")&lt;/script&gt;, y el navegador lo muestra como texto literal en lugar de ejecutar código.

Reglas de codificación específicas del contexto

La codificación de entidades funciona en contextos de contenido y atributos HTML, pero diferentes contextos requieren diferentes estrategias de codificación:

• Contexto de contenido HTML: Codifica <, >, & como entidades. Esto previene la inyección de nuevas etiquetas HTML.
• Contexto de atributo HTML: Codifica <, >, &, ", ' como entidades. Las comillas deben codificarse para prevenir la ruptura de los valores de atributo.
• Contexto de JavaScript: Las entidades HTML no funcionan dentro de etiquetas <script>. Usa escape de cadenas de JavaScript (escape con barra invertida) en su lugar, o usa JSON.stringify() para la inyección de datos.
• Contexto de CSS: Las entidades HTML no funcionan dentro de etiquetas <style>. Usa escape CSS (barra invertida seguida de código hexadecimal) para valores dinámicos.
• Contexto de URL: Usa codificación de URL (encodeURIComponent) para parámetros de consulta, no entidades HTML.

Codificación de entidades en diferentes contextos

En atributos HTML

Los valores de atributo requieren una codificación más estricta que el contenido HTML porque los atributos usan comillas como delimitadores. Los valores de atributo con comillas dobles deben codificar los caracteres de comillas dobles, y los valores con comillas simples deben codificar las comillas simples. Los ampersands y los corchetes angulares también deben codificarse.

<!-- Correct: entity-encoded attribute value -->
<a title="5 &gt; 3 is true">Example</a>

<!-- Incorrect: unencoded special characters -->
<a title="5 > 3 is true">Example</a>

En el ejemplo incorrecto, el > dentro de un valor de atributo puede causar problemas de análisis en ciertos contextos, incluso si la mayoría de los navegadores lo manejan con gracia. El HTML válido requiere codificar estos caracteres en los atributos.

En JavaScript

Las entidades HTML no se procesan dentro de las etiquetas <script>. Si necesitas incluir caracteres especiales en código JavaScript incrustado en HTML, debes usar las secuencias de escape propias de JavaScript:

<!-- Wrong: entities don't work in script tags -->
<script>
  var msg = "5 &gt; 3"; // This is literal "&gt;", not ">"
</script>

<!-- Correct: use JavaScript escapes -->
<script>
  var msg = "5 \u003E 3"; // Unicode escape
  var msg2 = "5 > 3";     // Or just use the character directly
</script>

Al inyectar datos desde el servidor en JavaScript en línea, el enfoque más seguro es usar JSON.stringify() en el lado del servidor y colocar el resultado dentro del script. Esto maneja automáticamente todo el escape necesario, incluyendo comillas, barras invertidas y caracteres de control.

En CSS

De manera similar, las entidades HTML no se procesan dentro de las etiquetas <style>. CSS tiene su propio mecanismo de escape usando una barra invertida seguida del punto de código Unicode hexadecimal del carácter:

<!-- Wrong: entities don't work in style tags -->
<style>
  .quote::before { content: "&ldquo;"; }
</style>

<!-- Correct: use CSS Unicode escapes -->
<style>
  .quote::before { content: "\201C"; }
</style>

Las secuencias de escape CSS usan una barra invertida seguida de uno a seis dígitos hexadecimales. Si se usan menos de seis dígitos y el siguiente carácter podría interpretarse como un dígito hexadecimal, añade un espacio después de la secuencia de escape.

Compatibilidad de navegadores

El soporte de entidades HTML es excelente en todos los navegadores modernos. Las cinco entidades requeridas (&, <, >, ", ') han sido soportadas desde los primeros navegadores. Las entidades nombradas para símbolos comunes como ©, ® y ™ también tienen soporte universal.

Los principales problemas de compatibilidad involucran entidades nombradas menos comunes introducidas en HTML5 y especificaciones posteriores. Algunos navegadores más antiguos pueden no reconocer entidades como + o ∉. Para máxima compatibilidad, usa entidades numéricas para caracteres poco comunes, ya que el soporte de entidades numéricas depende solo del soporte de Unicode, que es universal en los navegadores modernos.

Una nota especial: la entidad ' no era parte de HTML 4 y solo se definió en XHTML. Aunque todos los navegadores modernos la soportan, si necesitas compatibilidad con navegadores muy antiguos, usa ' para la codificación de comillas simples.

Consejos prácticos para usar entidades

• Codifica siempre el ampersand primero: Al construir un codificador de entidades, codifica el ampersand antes que otros caracteres. Si codificas los corchetes angulares primero, el &lt; resultante contiene un ampersand que luego sería doblemente codificado.
• Usa una estrategia de codificación consistente: Decide si tu proyecto usará entidades nombradas cuando estén disponibles o exclusivamente entidades numéricas, y mantén esa elección. Los estilos mezclados hacen que el código fuente sea más difícil de leer.
• Deja que el motor de plantillas maneje la codificación: Los motores de plantillas modernos como React JSX, plantillas de Vue y Twig codifican automáticamente la salida por defecto. Confía en estos mecanismos en lugar de codificar manualmente todo.
• No codifiques doblemente: Si el contenido ya está codificado como entidad, codificarlo nuevamente producirá referencias de entidad visibles en la salida (por ejemplo, &amp;lt; se muestra como &lt; en lugar de <). Este es un error común al aplicar múltiples capas de codificación.
• Prueba con caracteres especiales: Siempre prueba tu lógica de codificación con cadenas que contengan comillas, corchetes angulares, ampersands y caracteres no ASCII para verificar el comportamiento correcto.