Caracteres especiales: entidades, símbolos y charset
¿Cómo escribes el símbolo < dentro de una página HTML sin que el navegador piense que estás abriendo una etiqueta? ¿Y un ✓, un €, o un emoji? Hoy hablamos del pequeño alfabeto secreto que hay detrás de cualquier carácter que no sea una letra corriente — y de por qué, alguna vez, has visto una web con símbolos rotos como "ñ".
Entidades HTML: cuando un símbolo significa otra cosa
Ya conoces los caracteres < y
>: son los que usa HTML para abrir y cerrar
etiquetas. Pero, ¿qué pasa si quieres escribir literalmente el símbolo "menor que"
en tu texto, como en "2 < 5"? Si lo escribes tal cual, el navegador intentará
interpretarlo como el inicio de una etiqueta rota. Para estos casos existen las
entidades HTML: códigos especiales que representan un carácter sin
que el navegador los confunda con código.
Representa el símbolo < (menor que). Sin esta entidad, el navegador pensaría que estás abriendo una etiqueta nueva.
Representa el símbolo > (mayor que), por la misma razón que la anterior.
Representa el símbolo & (ampersand). Como el propio & es el que inicia una entidad, necesita su propia entidad para escribirse literalmente — un poco de inception tipográfico.
Un espacio "duro" que el navegador nunca colapsa ni usa como punto de salto de línea. Útil para evitar que, por ejemplo, "10 €" se parta entre el número y el símbolo al final de una línea.
El símbolo © de copyright, sin tener que buscarlo en el mapa de caracteres del sistema operativo.
No necesitas usar entidades para acentos y eñes (á, ñ, é...) si tu archivo ya
tiene <meta charset="UTF-8"> en el
<head>, como aprendiste en el Módulo 1.
Las entidades son solo para los caracteres que HTML usa como parte de su propia
sintaxis: <, >, &, comillas dentro de atributos, y poco más.
Símbolos y emojis: más allá del teclado
Además de las entidades con nombre, existen miles de símbolos accesibles por su código numérico Unicode: flechas, iconos matemáticos, monedas de todo el mundo. Y los emojis, técnicamente, no son más que otro carácter Unicode — el navegador no distingue entre una letra "a" y un 🚀, ambos son simplemente texto.
Como ves en el ejemplo, hoy en día casi siempre puedes escribir el emoji o el símbolo directamente, sin pasar por una entidad — es exactamente lo que hemos hecho en los "💡 Consejo" y "⚠️ Error común" de cada módulo de este curso. Las entidades siguen siendo necesarias para lo que HTML reserva para su propia sintaxis, pero para casi todo lo demás, UTF-8 ya te cubre.
Charset: el idioma secreto detrás de cada letra
Ya conociste <meta charset="UTF-8"> en el
Módulo 1, pero vale la pena entender qué hace de verdad. Cada carácter que ves en
pantalla —una letra, un emoji, un símbolo— se guarda en el archivo como una serie
de números. El charset (codificación de caracteres) es el diccionario que
el navegador usa para traducir esos números de vuelta a símbolos visibles.
Cuando el navegador usa el diccionario equivocado —por ejemplo, interpreta como
Windows-1252 un archivo guardado en UTF-8— aparecen esos símbolos rotos tan
característicos, como "programación" en vez de "programación". La solución
es casi siempre la misma: asegúrate de que tu editor guarda el archivo en UTF-8
Y que tu <meta charset> dice exactamente eso.
Los dos tienen que estar de acuerdo.
URL encode: por qué los espacios se vuelven %20
Las URLs tienen su propio conjunto de reglas: ciertos caracteres —el espacio, la eñe, los signos de interrogación repetidos— no pueden viajar tal cual dentro de una dirección web, porque el propio formato de la URL los usa para otra cosa. Para solucionarlo, el navegador los codifica con un símbolo de porcentaje seguido de su código hexadecimal.
El ejemplo más famoso. Por eso a veces ves URLs con %20 repartidos, sobre todo en nombres de archivo con espacios.
Los caracteres no ingleses también se codifican, usando varios bytes en UTF-8.
No necesitas codificar las URLs a mano casi nunca: los navegadores y la mayoría de herramientas lo hacen automáticamente por ti. Pero si algún día ves una URL con símbolos de porcentaje raros y te preguntas qué significan, ahora ya sabes leerla: es solo texto normal, disfrazado para poder viajar seguro dentro de una dirección web.
Ponlo a prueba
Comprueba lo que has aprendido
1. Quieres escribir el símbolo < dentro del texto visible de tu página, sin que el navegador lo confunda con una etiqueta. ¿Qué usas?
2. Ves texto roto como "programación" en una web. ¿Cuál es la causa más probable?
3. ¿Qué representa %20 en una URL?