Entidades de carácter y entidades numéricas

Qué son las entidades de carácter y las entidades numéricas

En las primeras versiones de HTML se especificaba que el juego de caracteres utilizado por las páginas web debía ser el juego de caracteres ISO 8859-1, más conocido como Latin-1.

Para poder incluir en un página web caracteres no incluidos en ese juego de caracteres se debían utilizar las entidades de carácter. Una entidad de carácter es una referencia a un carácter y se escribe con la sintaxis &nombre; es decir, empieza por el símbolo & (en inglés, ampersand, en español, et), a continuación se escribe el nombre del carácter y termina por un punto y coma.

Por ejemplo, la letra griega alfa (α) se podía incluir en una página web con la entidad de carácter α.

En las primeras versiones de HTML se fueron añadiendo entidades de carácter hasta llegar en HTML 4 a 252 entidades de carácter, que se muestran al final de esta lección, en el apartado Lista de entidades de carácter.

La norma RFC 2070, publicada en enero de 1997, permitió el uso de Unicode como juego de caracteres en HTML, por lo que se amplió el concepto de entidad de carácter a entidad numérica, para permitr la referencia a cualquier carácter Unicode, con la sintaxis &número; es decir empieza por el símbolo &, a continuación se escribe el código Unicode del carácter (en notación decimal o en notación hexadecimal precedida por una letra "x") y termina por un punto y coma.

Por ejemplo, la letra griega alfa (α), cuyo código de carácter Unicode es 945 (3B1 en hexadecimal) se podía incluir en una página web con la entidad de carácter α o con las entidades numéricas α o α.

Otras recomendaciones (por ejemplo, MathML), han definido más entidades de carácter que los navegadores también reconocen. La recomendación XML Entity Definitions for Characters (3ª edición, publicada en marzo de 2023) ha ido recopilando las entidades de carácter más empleadas en páginas web.

En HTML 5 la lista de entidades de carácter se amplió a más 2200. En la página Entidades de carácter HTML se muestra la lista completa.

Las entidades de carácter son más fáciles de utilizar porque es más fácil recordar un nombre que un código, pero al no existir entidades de carácter para todos los caracteres Unicode, en la mayoría de casos se tiene que utilizar la entidad numérica.

Las entidades de carácter más antiguas (las incluidas en HTML 3.2 y anteriores) se pueden escribir sin el punto y coma final, lo que puede dar lugar a resultados inesperados, como muestra el siguiente ejemplo. En él, los navegadores no muestran la palabra Microsoft porque &micro es la entidad de carácter del carácter µ. La página, además, no es válida por el mismo motivo (el validador requiere que la entidad de carácter termine por punto y coma).

<p>Durante años la informática personal ha estado dominada por intel&microsoft.</p>

<p>Durante años la informática personal ha estado dominada por intel&amp;microsoft.</p>

Las fuentes no suelen incluir todos los caracteres Unicode existentes, por lo que los navegadores suelen recurrir a distintas fuentes dependiendo de los caracteres a mostrar. Estas fuentes pueden ser alguna de las disponibles en el sistema operativo o estar incluidas en el navegador. Por eso hay que tener cuidado al incluir caracteres Unicode, sobre todo los incluidos en las versiones más recientes de Unicode, porque los visitantes pueden no ver esos caracteres.

En el caso de Windows, para mostrar emojis, Microsoft distribuye gratuitamente la fuente Segoe UI Emoji, que contiene muchos caracteres Unicode. En Windows 10, Microsoft no actualiza desde 2020 (cuando se publicó Windows 11) la fuente Segoe UI Emoji, y sigue usando la versión 1.29 de la fuente. En Windows 11, Miscrosoft sí que actualiza la fuente actualmente (octubre de 2024) usa la versión 1.51, que contiene más caracteres y con un estilo diferente al de la versión 1.29.

En el caso de Android (y cada vez más las distribuciones Linux), se incluyen las fuentes Noto, una familia de fuentes libres creada por Google. Para mostrar emojis, están disponibles las fuentes Noto Emoji.

Desde Firefox 61 (junio de 2018), Firefox utiliza la fuente Twemoji-colr, una versión en formato COLR de la fuente Twemoji, creada por Twitter, para mostrar los emojis no disponibles en la fuente del sistema. Anteriormente, desde Firefox 50 (noviembre de 2016) hasta Firefox 60 (mayo de 2018) Firefox utilizó la versión libre de la fuente EmojiOne.

El ejemplo siguiente contiene unos caracteres Unicode (concretamente emojis) para que usted mismo compruebe cómo se ven en su navegador y sistema operativo:

<p style="font-size: 4rem;">&#x1F642; &#x1F3F9; &#x1F958; &#x1F96A; &#x1F99C; &#x1F9CA; &#x1FAA2; &#x1F6DD; &#x1FABC;</p>

Las capturas siguientes muestran cómo se ve actualmente (octubre de 2024) el ejemplo anterior dependiendo de la fuente empleada (lo que a su vez depende del navegador y el sistema operativo). La fecha indica el año en que cada uno de los emojis de la imagen se añadió a Unicode:

• Fuente Noto (Android y otros):

  

• Fuente Segoe UI Emoji (Windows 11):

  

• Fuente Segoe UI Emoji (Windows 10):

  

• Fuente Twemoji (Firefox en Windows y otros):

  

Nota:

• Bugs de Firefox relacionados con Twemoji

Los caracteres especiales de HTML

En HTML hay cinco caracteres que tienen un significado especial. Si se quieren mostrar esos caracteres en una página web, escribirlos directamente puede hacer que la página no sea válida o puede hacer que el navegador no muestre el resultado esperado. En lugar de escribirlos directamente, se deben utilizar las entidades de carácter o las entidades numéricas correspondientes, que se muestran en la tabla siguiente. En el caso de los dos primeros (ampersand y menor que) siempre hay que escribirlos como entidad, en el caso del tercero (mayor que) es aconsejable, en el caso de los dos últimos (comillas dobles o simples) hay que escribirlas como entidad si queremos escribirlas en el valor de un atributo (lo que no es muy habitual).

Estos son los problemas que provoca utilizar los caracteres en vez de las entidades de carácter:

• El carácter ampersand (&) es el carácter inicial de las entidades de carácter o de las entidades numéricas. En HTML se puede escribir el carácter & directamente y la página será válida, salvo si el texto que sigue al & se puede interpretar como una entidad de carácter. En ese caso, además, el navegador puede mostrar un resultado no esperado. Por ello se aconseja utilizar siempre la entidad de carácter & cuando se quiera mostrar el carácter &, para no tener que pensar en cada caso si el navegador va a mostrar el resultado esperado.

  En el ejemplo siguiente el navegador muestra el resultado esperado puesto que el texto que sigue al carácter & no corresponde a ninguna entidad de carácter o numérica. La página es válida.

  Nota: El ejemplo se ha marcado con un aspa amarilla porque, aunque es correcto, se desaconseja no utilizar la entidad de carácter.

  

  <p>Calvin & Hobbes es una de las grandes tiras cómicas del siglo XX.</p>

  
  

  <p>Calvin &amp; Hobbes es una de las grandes tiras cómicas del siglo XX.</p>

  

  En el ejemplo siguiente el navegador no muestra el resultado esperado porque las entidades de carácter más antiguas (las incluidas en HTML 3.2 y anteriores) se pueden escribir sin el punto y coma final. Los navegadores no muestran la palabra Microsoft porque &micro es la entidad de carácter del carácter µ. La página, además, no es válida por el mismo motivo (el validador requiere que la entidad de carácter termine por punto y coma).

  

  <p>Durante años la informática personal ha estado dominada por intel&microsoft.</p>

  
  

  <p>Durante años la informática personal ha estado dominada por intel&amp;microsoft.</p>

  
• El carácter "menor que" (<) en HTML indica que se abre una etiqueta, por lo que no se debe escribir en una página web si no es por ese motivo. Aunque los navegadores sean capaces de mostrar el resultado esperado, la página no es válida. Para que la página sea correcta, se debe escribir la entidad de carácter &lt;.

  En el ejemplo siguiente, los navegadores consiguen mostrar el resultado esperado, pero la página no es válida:

  

  <p>0 < 1</p>

  
  

  <p>0 &lt; 1</p>

  

  En el ejemplo siguiente, los navegadores ni siquiera consiguen sacar el resultado esperado:

  

  <p>0<x<5</p>

  
  

  <p>0&lt;x&lt;5</p>

  
• El carácter "mayor que" (>) en HTML indica que se cierra una etiqueta y puede dar problemas en navegadores antiguos, por lo que se aconseja escribir la entidad de carácter &gt;, aunque su uso no es incorrecto (las páginas son válidas).
  

  <p>1 > 0</p>

  
  

  <p>1 &gt; 0</p>

  
• Los caracteres comillas dobles (") y simples (') en HTML indica el principio y final de los valores de los atributos, por tanto no se pueden escribir en un atributo y en su lugar se deben escribir las entidades de carácter &quot; o &apos;.
  

  <p title=""Hola"">Sitúe el cursor sobre este párrafo para ver un mensaje oculto.</p>

  
  

  <p title="&quot;Hola&quot;">Sitúe el cursor sobre este párrafo para ver un mensaje oculto.</p>

  

Lista de entidades de carácter HTML

En HTML 5 la lista de entidades de carácter se amplió a más 2200. En la página Entidades de carácter HTML se muestra la lista completa.

Lista de entidades de carácter HTML 4

La tabla siguiente muestra las 252 entidades de carácter definidas en la recomendación HTML 4. De cada carácter se muestra:

• el carácter
• el nombre del carácter
• la entidad de carácter con la notación &nombre;
• la entidad numérica con la notación &código;, en la que el código se expresa como número hexadecimal
• la recomendación HTML en la que se introdujo la entidad de carácter
• la descripción del carácter

Referencia: Lista de entidades de carácter de HTML en Wikipedia