CodeGym /Cursos /Frontend SELF ES /Símbolos especiales

Símbolos especiales

Frontend SELF ES
Nivel 4 , Lección 5
Disponible

5.1 Escape de caracteres

En HTML, los caracteres especiales, también conocidos como "character entities", se utilizan para representar caracteres que de otro modo se interpretarían como parte de la sintaxis de HTML. Estos caracteres incluyen, por ejemplo, los signos de menor y mayor, el ampersand, espacios, así como caracteres de varios idiomas y conjuntos de caracteres.

Signos de menor y mayor y ampersand

Para mostrar caracteres que se utilizan en HTML como parte de una etiqueta o sintaxis, es necesario utilizar códigos especiales:

  • < : &lt;
  • > : &gt;
  • & : &amp;

Ejemplo de uso:

HTML
    
      <p>Usa &lt; y &gt; para indicar los signos de menor y mayor, y &amp; para el ampersand.</p>
    
  

Comillas

Para mostrar comillas dobles y simples dentro de los atributos de HTML:

  • " : &quot;
  • ' : &apos;

Ejemplo de uso:

HTML
    
      <p>Para comillas usa &quot;comillas dobles&quot; y &apos;comillas simples&apos;.</p>
    
  

5.2 Espacios y espacios no separables

En HTML varios espacios consecutivos siempre se muestran como un solo espacio. Para mantener los espacios o crear espacios no separables se utilizan símbolos especiales:

  • Espacio : &nbsp;
  • Espacio fino : &thinsp;
  • Espacio completo : &emsp;
  • Medio espacio : &ensp;

Ejemplo de uso:

HTML
    
      <p>Este&nbsp;texto&nbsp;tiene&nbsp;varios&nbsp;espacios&nbsp;no&nbsp;separables.</p>
    
  

Símbolos especiales y signos diacríticos

HTML soporta una gran cantidad de símbolos especiales para varios idiomas y conjuntos de caracteres. Por ejemplo:

  • © : &copy;
  • ® : &reg;
  • ™ : &trade;
  • € : &euro;
  • £ : &pound;

Ejemplo de uso:

HTML
    
      <p>Derechos de autor &copy; 2024. Todos los derechos reservados. Precio: 50 &euro;</p>
    
  

Símbolos matemáticos

HTML admite un conjunto amplio de símbolos matemáticos:

  • ± : &plusmn;
  • × : &times;
  • ÷: &divide;
  • ≤ : &le;
  • ≥: &ge;
  • ∞ : &infin;
  • √ : &radic;

Ejemplo de uso:

HTML
    
      <p>Solución de la ecuación: x &ge; 5 y x &le; 10. Usa &radic; para indicar la raíz.</p>
    
  

5.3 Flechas y otros símbolos gráficos

HTML también soporta flechas y otros símbolos gráficos:

  • ← : &larr;
  • ↑ : &uarr;
  • → : &rarr;
  • ↓ : &darr;
  • ↔ : &harr;
  • ♠ : &spades;
  • ♣ : &clubs;
  • ♥ : &hearts;
  • ♦ : &diams;

Ejemplo de uso:

HTML
    
      <p>Direcciones: &larr; izquierda, &uarr; arriba, &rarr; derecha, &darr; abajo.</p>
      <p>Pintas de cartas: &spades; &hearts; &diams; &clubs;</p>
    
  

Lista completa de símbolos especiales

La lista completa de símbolos especiales se puede encontrar en la documentación de HTML o en recursos web especializados como W3Schools o HTML Character Entities Reference.

5.4 Uso de emojis

Los emojis se han convertido en una parte integral de la comunicación digital moderna. Se utilizan para expresar emociones, ideas y objetos en mensajes de texto, redes sociales y páginas web. En HTML, los emojis se pueden usar de varias maneras.

Uso de Unicode

Los emojis se pueden insertar en un documento HTML mediante símbolos Unicode. Cada emoji tiene un código único que se puede usar para mostrarlo.

Ejemplo de uso de Unicode:

HTML
    
      <p>Cara sonriente: 😀</p>
      <p>Corazón: ❤️</p>
      <p>Pulgar hacia arriba: 👍</p>

       
   
       
   
       
   
    
  

Para insertar un emoji usando Unicode, debes usar su código hexadecimal, precedido por &#x y terminado con ;.

Ejemplo de uso de códigos hexadecimales:

HTML
    
      <p>Cara sonriente: &#x1F600;</p>
      <p>Corazón: &#x2764;&#xFE0F;</p>
      <p>Pulgar hacia arriba: &#x1F44D;</p>

       
   
       
   
       
   
    
  

No necesitas memorizar esto: solo busca en Google si lo necesitas y no te asustes si lo encuentras en el código de alguien más 😊

1
Cuestionario/control
Etiquetas principales de HTML, nivel 4, lección 5
No disponible
Etiquetas principales de HTML
Etiquetas principales de HTML
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION