Usar emojis en HTML

Los emojis son personajes del conjunto de caracteres UTF-8: 😄 😍 💗

¿Qué son los emojis?

Los emojis parecen imágenes o iconos, pero no lo son.

Son letras (caracteres) del juego de caracteres UTF-8 (Unicode).

UTF-8 cubre casi todos los personajes y símbolos del mundo.

El atributo HTLM charset

Para mostrar una página HTML correctamente, un navegador web debe conocer el conjunto de caracteres utilizado en la página.

Esto se especifica en la etiqueta <meta>:

<meta charset="UTF-8">

Si no se especifica, UTF-8 es el juego de caracteres predeterminado en HTML.

Caracteres UTF-8

Muchos caracteres UTF-8 no se pueden escribir en un teclado, pero siempre se pueden mostrar usando números (llamados números de entidad):

  • A es 65
  • B es 66
  • C es 67

Ejm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>I will display A B C</p> 
<p>I will display &#65; &#66; &#67;</p>

</body>
</html>

Ejm explicado

El elemento <meta charset = “UTF-8”> define el juego de caracteres.

Los caracteres A, B y C se muestran con los números 65, 66 y 67.

Para que el navegador comprenda que está mostrando un carácter, debe comenzar el número de entidad con & # y terminarlo con “;” (punto y coma).

Caracteres Emoji

Los emojis también son personajes del alfabeto UTF-8.

  • 😄 es 128516
  • 😍 es 128525
  • 💗 es 128151

Ejm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>

Dado que los emojis son caracteres, se pueden copiar, mostrar y dimensionar como cualquier otro carácter en HTML.

Ejm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>Sized Emojis</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

Algunos símbolos emoji en UTF-8

Emoji Value
🗻 #128507;
🗼 #128508;
🗽 #128509;
🗾 #128510;
🗿 #128511;
😀 #128512;
😁 #128513;
😂 #128514;
😃 #128515;
😄 #128516;
😅 #128517;