HTML - CORS web

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 usan 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.

Hay 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

Consejo: Ejemplo de entidad nombrada

©

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

Consejo: Ejemplo de entidad numérica decimal

©
  • 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

Consejo: Ejemplo de entidad numérica hexadecimal

©

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 los atributos.

Símbolos HTML comunes

HTML proporciona muchos símbolos que puedes usar en las 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 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 Izquierda ("), Comillas Dobles Derecha ("), Comilla Simple Izquierda ('), y Comilla Simple Derecha ('') son:
    • Comillas Dobles Izquierda ("): “
    • Comillas Dobles Derecha ("): ”
    • Comilla Simple Izquierda ('): ‘
    • Comilla Simple Derecha ('): ’

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 flecha

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

Flechas 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 los 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 mejores prácticas:

  • Usa entidades para caracteres reservados: Siempre usa entidades HTML para caracteres que están reservados en HTML, como < (&lt;), > (&gt;) y & (&amp;). Usar los caracteres reales puede estropear 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 la 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 pueden no leer correctamente todos los símbolos. 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 son compatibles con símbolos y entidades HTML. Los navegadores más utilizados, 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 navegadores, especialmente Internet Explorer (antes de la versión 9), pueden no mostrar correctamente todos los símbolos. Si tu sitio web necesita ser compatible con navegadores antiguos, prueba tus páginas y considera proporcionar contenido alternativo si es necesario.

  • Compatibilidad 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), es posible que algunos símbolos no se muestren correctamente. Siempre establece la codificación de caracteres apropiada en la sección head de tu HTML de esta manera:

Consejo: Character Encoding

<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 contengan símbolos en varios navegadores y dispositivos. Esto te ayudará a identificar y abordar cualquier problema o inconsistencia específica del navegador.

Si estás utilizando símbolos menos comunes o si la compatibilidad con 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.