Caracteres especiales en HTML

Algunos caracteres tienen un significado especial en HTML. El más evidente es <: el navegador cree que empieza una etiqueta. ¿Cómo escribes entonces “si x < 10” en una página? Con una entidad.

Qué es una entidad

Una entidad es un código que el navegador sustituye por un carácter. Se escribe de dos formas:

• Por nombre: & + nombre + ; → <
• Por número: &# + número + ; → <

Las dos muestran el carácter <.

Las imprescindibles

Estas debes usarlas, porque el carácter original tiene significado en HTML:

Carácter	Entidad	Cuándo es necesaria
<	&lt;	Siempre que quieras mostrar el signo en el texto
>	&gt;	Por simetría con &lt; (a veces no es obligatoria)
&	&amp;	Cuando va seguido de algo que parece una entidad
"	&quot;	Dentro del valor de un atributo entre comillas dobles
'	&#39;	Dentro de un atributo entre comillas simples

<p>La condición es: si edad &lt; 18 &amp;&amp; sin permiso...</p>
<input value="Dijo &quot;hola&quot;">

Son especialmente importantes cuando muestras código HTML en una página, como en un tutorial. Sin ellas, el navegador interpretaría las etiquetas en lugar de mostrarlas.

El espacio duro:  

  (non-breaking space) es un espacio que:

1. Nunca se usa para partir una línea. El navegador nunca pondrá las dos palabras que une en líneas distintas.
2. Siempre se muestra, aunque haya varios seguidos (los espacios normales se juntan en uno).

Es útil para que no se separen cosas que deben ir juntas:

<p>El precio es 25&nbsp;€ y el pedido llega en 3&nbsp;días.</p>
<p>Sr.&nbsp;García · Km&nbsp;42 · Capítulo&nbsp;7</p>

No lo uses para crear espacio en blanco o sangrías: eso se hace con CSS (margin, padding, gap).

Otras entidades útiles

Carácter	Entidad	Nombre
©	©	Copyright
®	®	Marca registrada
€	€	Euro
—	—	Raya
–	–	Guion medio (para rangos: 10–20)
« »	« »	Comillas españolas
×	×	Multiplicación
÷	÷	División
→	→	Flecha
…	…	Puntos suspensivos

¿Y las tildes y la ñ?

En páginas antiguas verás cosas como á (á) o ñ (ñ). Se usaban cuando las páginas no estaban en UTF-8.

Hoy, si tu página tiene <meta charset="utf-8"> y el archivo está guardado en UTF-8, escribe los caracteres directamente: á, ñ, €, ©, incluso emojis. Es más legible y funciona perfectamente.

Las entidades solo son necesarias para los caracteres con significado especial (<, & y las comillas dentro de atributos). El resto son opcionales: útiles para caracteres que no están en tu teclado, como — o ×.

Errores típicos

• Escribir &nbsp sin el punto y coma final. A veces funciona y a veces no; ponlo siempre.
• Usar muchos     para separar cosas. Usa CSS.
• Pegar código HTML en una página sin convertir los <: el navegador intenta ejecutarlo como etiquetas y la página se rompe.