Entidades HTML

Hay muchos símbolos que no están presentes en un teclado estándar (símbolos matemáticos, técnicos, de moneda, etc.). Además, hay símbolos que no se pueden usar directamente porque pueden causar confusión. Por ejemplo, no podemos usar > porque en HTML este símbolo se interpreta como delimitador de etiqueta y el navegador no lo mostrará como texto.

En HTML, las entidades muestran caracteres reservados que pueden confundirse con código HTML, o caracteres invisibles, como los espacios de no separación. También representan caracteres que son difíciles o imposibles de escribir con un teclado.

Toda entidad comienza con un ampersand (&) y termina con punto y coma (;). El punto y coma es obligatorio; sin él, el navegador puede no reconocer la entidad en absoluto.

Referencias con nombre, decimales y hexadecimales

Hay tres formas de escribir el mismo carácter. Las tres siguientes producen un ampersand (&):

Una referencia con nombre (como &) es fácil de leer y recordar, pero solo existe un conjunto fijo de nombres definidos. Una referencia numérica puede representar cualquier carácter Unicode mediante su punto de código — decimal (&) o hexadecimal (&). El decimal 38 y el hexadecimal 26 son simplemente dos formas de escribir el mismo punto de código. Las referencias numéricas son útiles cuando no existe una entidad con nombre para el carácter que necesitas.

Los nombres de las entidades distinguen entre mayúsculas y minúsculas: & funciona, pero & no.

Por ejemplo:

<p>5 &lt; 10 and 10 &gt; 5</p>
<title>HTML entities &amp; symbols</title>
<p>Snowman: &#9731; or &#x2603;</p>

Cuándo son necesarias las entidades

No es necesario escapar todos los caracteres especiales; la mayoría se pueden escribir directamente. Las entidades son obligatorias únicamente cuando un carácter de otro modo sería interpretado como marcado, o cuando se necesita un carácter invisible que un espacio normal no proporciona:

• < — escapa < para que el navegador no lo lea como inicio de una etiqueta.
• > — escapa > (recomendado por simetría, aunque solo es estrictamente necesario en ciertos contextos).
• & — escapa & para que no sea leído como el inicio de otra entidad.
• " — escapa una comilla doble dentro de un valor de atributo que está entre comillas dobles.
•   — un espacio de no separación, usado para mantener dos palabras en la misma línea.

Por ejemplo, para evitar que una etiqueta y un año queden en líneas distintas, usa un espacio de no separación:

<p>Copyright&nbsp;2024</p>

El navegador lo muestra como un espacio normal, pero nunca insertará un salto de línea entre "Copyright" y "2024".

Entidades de caracteres de uso común en HTML

Símbolos matemáticos compatibles con HTML

Letras griegas compatibles con HTML

Otras entidades compatibles con HTML

Espacio de no separación

El espacio de no separación ( ) es una de las entidades de caracteres más comunes en HTML. Es un espacio que no provoca un salto de línea. Esto significa que dos palabras separadas por un espacio de no separación permanecerán juntas. Además, el espacio de no separación impide que los navegadores colapsen múltiples espacios en uno solo.

Para ver la lista completa de puntos de código y cómo los caracteres se corresponden con números, consulta la Referencia Unicode HTML.

Marcas diacríticas

Cuando hablamos de una marca diacrítica, nos referimos a un "glifo" que se añade a una letra. Algunas de estas marcas, como el acento grave (̀) y el acento agudo (́), se denominan acentos. Las marcas diacríticas pueden aparecer encima o debajo de una letra, entre dos letras o dentro de una letra.

A continuación se muestra una lista con algunas marcas diacríticas:

Práctica