Los documentos HTML son archivos de texto con una sintaxis específica. Ciertos caracteres — los corchetes angulares, el ampersand, la comilla — tienen un significado especial en esa sintaxis. Cuando quieres mostrar estos caracteres como contenido en lugar de usarlos como marcado, necesitas codificarlos como entidades HTML. Hacerlo correctamente no es solo una cuestión de corrección; la codificación incorrecta es una de las causas más comunes de diseños rotos y vulnerabilidades de scripting entre sitios (XSS).
Los Caracteres Que Deben Codificarse
Cinco caracteres deben codificarse cuando aparecen en contenido HTML: el signo menor que < se convierte en <, el signo mayor que > se convierte en >, el ampersand & se convierte en &, la comilla doble " se convierte en " (requerida dentro de valores de atributos entre comillas dobles) y la comilla simple ' se convierte en ' o ' (requerida dentro de valores de atributos entre comillas simples).
El signo menor que es el más crítico porque < hace que inmediatamente el analizador HTML del navegador entre en modo de reconocimiento de etiquetas. Si escribes el texto "si x < 5" en HTML sin codificar, el navegador intenta interpretar < 5 como el inicio de una etiqueta HTML. Dependiendo del contenido que sigue, esto elimina silenciosamente el carácter, causa corrupción visible de visualización o en escenarios de inyección ejecuta HTML proporcionado por un atacante.
El ampersand es igualmente crítico porque inicia secuencias de entidades. Escribir "Tom & Jerry" sin codificar hace que el navegador comience a buscar un carácter ; para completar una entidad. Los navegadores modernos son indulgentes con los ampersands desnudos en el contenido, pero la especificación HTML requiere codificación.
Entidades Nombradas vs. Referencias Numéricas
Las entidades HTML tienen dos formas: nombradas (©, —, ) y numéricas (©, —,  ). Las entidades nombradas son legibles pero solo existen para un subconjunto de caracteres Unicode. Las entidades numéricas (decimales © o hexadecimales ©) funcionan para cada punto de código Unicode. Ambas formas producen una salida idéntica.
Las entidades nombradas de uso común incluyen (espacio sin ruptura) para prevenir saltos de línea entre palabras, — (raya) para guiones tipográficos, © (símbolo de copyright), & (ampersand), < y > (corchetes angulares), y “ y ” (comillas dobles izquierda y derecha) para citas tipográficamente correctas.
Los caracteres de ancho cero y los espacios Unicode especiales no tienen entidades nombradas y requieren referencias numéricas. En la práctica, si estás trabajando con HTML codificado en UTF-8 moderno, simplemente puedes incluir el carácter Unicode directamente en lugar de usar una referencia numérica.
Cuándo No Necesitas Entidades
Si tu documento HTML declara codificación UTF-8 (mediante <meta charset="UTF-8">) y tu archivo realmente está guardado como UTF-8, puedes incluir la mayoría de los caracteres Unicode directamente en tu HTML sin codificarlos. Los caracteres acentuados, las rayas, las comillas tipográficas, los emojis y la mayoría de los símbolos pueden escribirse o pegarse directamente.
El malentendido de "la codificación es innecesaria" lleva a la sobrecodificación. Los desarrolladores a veces codifican cada carácter no ASCII por precaución, produciendo HTML fuente ilegible lleno de referencias numéricas. Esto hace que las plantillas sean difíciles de leer y editar, y no agrega ningún beneficio de seguridad para caracteres que no tienen significado especial en la sintaxis HTML.
Los caracteres que genuinamente requieren codificación independientemente de la declaración del charset son los cinco caracteres estructurales mencionados anteriormente: <, >, &, " (en atributos) y ' (en atributos entre comillas simples). Estos caracteres tienen significado sintáctico en HTML y deben escaparse cuando aparecen como datos en lugar de marcado.
Codificación en Contexto: Atributos y JavaScript
Las reglas de codificación cambian según el contexto. Dentro de un valor de atributo HTML, el requisito de codificación depende del delimitador: los atributos entre comillas dobles deben codificar ", mientras que los atributos entre comillas simples deben codificar '. Los atributos sin comillas (que no deberías usar) deben codificar espacios, signos de igual y ambos caracteres de comillas.
Al insertar datos proporcionados por el usuario en HTML, siempre codifica en la salida, no en la entrada. Almacena los datos sin procesar y codifica al renderizar. La codificación en la entrada y el almacenamiento de datos precodificados lleva a errores de doble codificación (el ampersand en & se codifica de nuevo como &amp;).
JavaScript dentro de HTML tiene su propio contexto de codificación. Si estás inyectando un valor en una cadena JavaScript dentro de un elemento script, la codificación de entidades HTML no es el enfoque correcto — necesitas el escape de cadenas JavaScript (escape de caracteres especiales con barra diagonal inversa). Confundir los dos contextos es una fuente común de errores y vulnerabilidades XSS.
La codificación de entidades HTML no es complicada una vez que entiendes la regla: codifica los cinco caracteres estructurales cuando aparecen como contenido, usa la declaración de charset para evitar la codificación innecesaria de caracteres Unicode, y siempre codifica en la salida usando funciones apropiadas para el contexto. Un codificador y decodificador de entidades HTML es útil para depurar problemas de visualización con caracteres especiales, verificar que los envíos de formularios se estén saneando correctamente y producir rápidamente la entidad correcta para cualquier carácter.