Entidades de carácter HTML y referencias numéricas

TL;DR — Respuesta directa

En los documentos HTML5 modernos con UTF-8 (<meta charset="utf-8">), los desarrolladores deben escribir directamente los caracteres literales para todos los símbolos, textos internacionales y emojis. Las referencias de carácter solo son estrictamente necesarias para los 5 delimitadores sintácticos de HTML: & (&), < (<), > (>), " (") y ' (').

💡

Regla de producción: No convierta el texto normal no ASCII en entidades en documentos UTF-8. Use &, <, >, " y ' para evitar errores de análisis del HTML y vulnerabilidades XSS.

Las 5 entidades esenciales de XML/HTML

Estos caracteres tienen un significado sintáctico especial en los analizadores HTML y deben escaparse dentro de los nodos de texto y de los atributos.

&

Obligatorio al representar un ampersand que no inicia una referencia de entidad.

<

Obligatorio en el contenido de texto para evitar que el navegador interprete la apertura de una etiqueta.

>

Recomendado en el contenido de texto para evitar ambigüedades con la sintaxis de cierre de etiquetas.

"

Obligatorio dentro de valores de atributos HTML entre comillas dobles.

'

Obligatorio dentro de valores de atributos HTML entre comillas simples.

Las 5 reglas esenciales de escape con entidades HTML

HTML html-escaping.html

<!-- 1. The 5 mandatory HTML syntax delimiter escapes -->
<p>Tom &amp; Jerry</p>          <!-- & becomes &amp; -->
<p>5 &lt; 10</p>                 <!-- < becomes &lt; -->
<p>10 &gt; 5</p>                 <!-- > becomes &gt; -->
<input value="&quot;Hello&quot;">  <!-- " inside attribute becomes &quot; -->
<input value='&apos;World&apos;'>  <!-- ' inside attribute becomes &apos; -->

<!-- 2. Characters in UTF-8 DO NOT need escaping! -->
<p>© 2024 CopyCharacter • All Rights Reserved → Ready 🔥</p>

Salida del programa

Tom & Jerry
5 < 10
10 > 5
"Hello"
'World'
© 2024 CopyCharacter • All Rights Reserved → Ready 🔥

Errores comunes frente a patrones de producción

Aprenda qué patrones fallan en producción y cuáles son las alternativas modernas conformes con los estándares.

Escapar caracteres no ASCII en HTML5

Marcado web moderno con codificación UTF-8.

EVITAR: ❌ Escapar cada carácter a entidades heredadas

<p>&copy; 2024 &bull; All Rights Reserved &rarr; &eacute;</p>

Por qué falla: Infla el tamaño del HTML, vuelve el código fuente imposible de leer y buscar, y resulta innecesario en documentos UTF-8.

RECOMENDADO: ✅ Caracteres UTF-8 directos

<p>© 2024 • All Rights Reserved → é</p>

Por qué es mejor: Limpio, legible, buscable y óptimo para la compresión y el SEO.

Matriz de casos límite e invariantes

Una matriz de pruebas diversa entre caracteres que compara el comportamiento de los caracteres en ASCII, marcas combinantes, emojis, banderas y fragmentos sustitutos.

Caso de prueba	Glifo de entrada	Unidades de código	Puntos de código	Grafemas	Categoría	Explicación técnica
Ampersand en la cadena de consulta	<a href="/search?q=1&v=2">	`—`	`—`	`—`	Standard	Un & sin escapar en atributos de URL puede ser malinterpretado por los analizadores HTML como una entidad con nombre no válida.

Procedencia de estándares y fuentes

Todos los invariantes técnicos, las API y los comportamientos de esta guía se verifican contra las especificaciones primarias oficiales.

WHATWG

WHATWG HTML Living Standard

Cláusula: §13.5 Named Character References

Leer la especificación →

W3C

W3C HTML5 Specification

Cláusula: §8.1.4 Character References