HTML - Símbolos

Mateo G. -

Entidad HTML

Una entidad HTML es un fragmento de texto ("cadena") que comienza con un ampersand (&) y termina con un punto y coma (;). Las entidades se utilizan para mostrar caracteres reservados (que de otro modo se leerían como código HTML) y caracteres invisibles (como espacios sin romper). También puedes usarlas en lugar de otros caracteres que son difíciles de escribir con un teclado estándar.

Existen dos tipos principales de entidades HTML:

Entidad Nombrada

Una entidad nombrada tiene un nombre. Por ejemplo, la entidad nombrada para el símbolo de copyright (©) es ©.

Estas son sensibles a mayúsculas y minúsculas y terminan con un punto y coma.

Entidad Numérica

Las entidades numéricas pueden representarse mediante un valor numérico. Hay dos tipos:

  • Decimal: Las entidades numéricas decimales se escriben como &#N;, donde N es el número decimal ISO 10646. Por ejemplo, la entidad numérica para el símbolo de copyright (©) es ©

  • Hexadecimal: Las entidades numéricas hexadecimales se escriben como &#xN;, donde N es el número hexadecimal ISO 10646. Por ejemplo, la entidad numérica para el símbolo de copyright (©) es ©

Usar entidades HTML es sencillo - solo necesitas conocer el nombre o número de la entidad para el carácter que quieres mostrar. Las entidades pueden usarse en el texto de tu documento HTML, así como dentro de los valores de atributos.

Símbolos HTML comunes

HTML ofrece muchos símbolos que puedes usar en páginas web. Aquí tienes algunos símbolos comunes y sus correspondientes entidades HTML:

Símbolos de moneda

  • Euro: La entidad HTML para el símbolo del Euro (€) es €.
  • Libra: La entidad HTML para el símbolo de la Libra (£) es £.
  • Yen: La entidad HTML para el símbolo del Yen (¥) es ¥.
  • Centavo: La entidad HTML para el símbolo del Centavo (¢) es ¢.

Símbolos de derechos de autor y marcas registradas

  • Derechos de autor: La entidad HTML para el símbolo de Derechos de autor (©) es ©.
  • Marca registrada: La entidad HTML para el símbolo de Marca registrada (®) es ®.
  • Marca comercial: La entidad HTML para el símbolo de Marca comercial (™) es ™.

Símbolos de puntuación

  • Ampersand: La entidad HTML para el símbolo Ampersand (&) es &.
  • Mayor que y Menor que: Las entidades HTML para los símbolos Mayor que (>) y Menor que (<) son &gt; y &lt;, respectivamente.
  • Comillas: Las entidades HTML para Comillas dobles de apertura ("), Comillas dobles de cierre ("), Comilla simple de apertura ('), y Comilla simple de cierre ('') son:
    • Comillas dobles de apertura ("): “
    • Comillas dobles de cierre ("): ”
    • Comilla simple de apertura ('): ‘
    • Comilla simple de cierre ('): ’

Símbolos matemáticos

  • Más y Menos: Las entidades HTML para los símbolos Más (+) y Menos (-) son:

    • Más (+): +
    • Menos (−): -

  • Multiplicación y División

    • Multiplicación (×): ×
    • División (÷): ÷

Fracciones

Las siguientes fracciones tienen códigos específicos:

Consejo: Un cuarto (¼)

&frac14;

Consejo: Un medio (½)

&lt;&frac12&gt;;

Consejo: Tres cuartos (¾)

&lt;&frac34&gt;;

Símbolos de flechas

Las siguientes direcciones de flechas tienen códigos específicos:

Flechas hacia arriba, abajo, izquierda, derecha

Consejo: Flecha hacia arriba (↑)

&lt;&uarr&gt;;

Consejo: Flecha hacia abajo (↓)

&lt;&darr&gt;;

Consejo: Flecha hacia la izquierda (←)

&lt;larr&gt;;

Consejo: Flecha hacia la derecha (→)

&lt;rarr&gt;;

Flechas dobles

Consejo: Flecha doble hacia la izquierda (⇐)

&amp;lArr;

Consejo: Flecha doble hacia arriba (⇑)

&amp:uArr;

Consejo: Flecha doble hacia la derecha (⇒)

&amp:rArr;

Uso de símbolos HTML

Hay dos formas principales de insertar símbolos en tu código HTML:

Insertar símbolos directamente

Puedes insertar algunos símbolos directamente en tu código HTML usando tu teclado. Puedes usar el signo de dólar ($), el signo más (+) o el signo igual (=) directamente en tu código.

Consejo: Insertar símbolos directamente

<p>El precio es $99.</p>
<p>2 + 2 = 4</p>

Usar entidades HTML

Para símbolos que no están disponibles en tu teclado o que tienen un significado especial en HTML (como < o >), necesitas usar entidades HTML. Puedes usar entidades con nombre o entidades numéricas.

Consejo: Usar entidades HTML

<p>Este es el símbolo de copyright: &copy;</p>
<p>Este es el símbolo del euro: &euro;</p>
<p>Este es el símbolo de marca registrada: &#174;</p>

Al usar símbolos en tus páginas web, considera estas buenas prácticas:

  • Usa entidades para caracteres reservados: Siempre usa entidades HTML para caracteres reservados en HTML, como < (&lt;), > (&gt;) y & (&amp;). Usar los caracteres reales puede alterar tu código HTML.
  • Sé consistente: Elige un método (entidades con nombre o numéricas) y úsalo en todo tu sitio web para mantener la consistencia y legibilidad.
  • Prueba tu página: Siempre prueba tu página web en múltiples navegadores para asegurarte de que los símbolos se muestren correctamente.
  • Considera la accesibilidad: Algunos lectores de pantalla podrían no leer todos los símbolos correctamente. Proporciona texto alternativo cuando sea necesario para asegurarte de que todos los usuarios puedan acceder al contenido.

Recuerda, aunque los símbolos pueden añadir interés visual y significado a tus páginas web, deben usarse con moderación y con un propósito para mejorar la experiencia del usuario.

Compatibilidad con navegadores

La mayoría de los navegadores web modernos admiten símbolos y entidades HTML. Los navegadores de uso común, como Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge e Internet Explorer, pueden mostrar la mayoría de los símbolos sin problemas.

Existen algunas inconsistencias conocidas con ciertos símbolos en navegadores específicos:

  • Versiones antiguas de navegadores: Las versiones más antiguas de los navegadores, especialmente Internet Explorer (antes de la versión 9), pueden no mostrar todos los símbolos correctamente. Si tu sitio web necesita ser compatible con navegadores más antiguos, prueba tus páginas y considera ofrecer contenido alternativo si es necesario.

  • Soporte de fuentes: Algunos símbolos pueden no mostrarse correctamente si el dispositivo del usuario no tiene una fuente que incluya ese carácter. Esto es más probable con símbolos menos comunes. Para minimizar este problema, puedes usar fuentes web seguras o proporcionar fuentes de respaldo.

  • Problemas de codificación: Si tu documento HTML no especifica la codificación de caracteres correcta (como UTF-8), algunos símbolos podrían no mostrarse correctamente. Siempre establece la codificación de caracteres apropiada en la sección head de tu HTML de esta manera:

Consejo: Codificación de caracteres

<meta charset="UTF-8">
  • Inconsistencias en los nombres de entidades: Algunos navegadores pueden reconocer los nombres de entidades en minúsculas (como &copy;), mientras que otros pueden requerir mayúsculas (&COPY;). Para evitar este problema, utiliza siempre nombres de entidades en minúsculas, ya que son más ampliamente compatibles.

Para ofrecer una buena experiencia a los usuarios, prueba tus páginas web que contienen símbolos en varios navegadores y dispositivos. Esto te ayudará a identificar y abordar cualquier problema e inconsistencia específica del navegador.

Si estás utilizando símbolos menos comunes o si la compatibilidad con los navegadores es una preocupación para tu sitio web, considera proporcionar texto alternativo o imágenes para transmitir el mismo significado. Esto ayudará a garantizar que todos los usuarios puedan acceder a tu contenido, independientemente de su navegador o dispositivo.