Uso de emoticonos en HTML

Los emoticonos (Emoji) son caracteres del conjunto de caracteres UTF-8:   

¿Qué son los Emoji?

Los emoticonos (Emoji) son similares a imágenes o íconos, pero no lo son.

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

Consejo:UTF-8 abarca prácticamente todos los caracteres y símbolos del mundo.

Atributo charset de HTML

Para mostrar correctamente la página HTML, el navegador web debe saber qué conjunto de caracteres se utiliza en la página.

Esto es en <meta> Se especifica en la etiqueta:

<meta charset="UTF-8">

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

Caracteres UTF-8

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

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Mostraré: A B C</p>
<p>Mostraré: A B C</p>
</body>
</html>

Pruebe usted mismo

Ejemplo de explicación

<meta charset="UTF-8"> El elemento define el conjunto de caracteres.

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

Para que el navegador sepa que está mostrando caracteres, debe comenzar con &# y terminar con ; (punto y coma) el número del entero.

Caracteres Emoji

Los emojis también son caracteres de la letra UTF-8:

  •  es 128516
  •  es 128525
  •  es 128151

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Mi primer Emoji</h1>
<p>😀</p>
</body>
</html>

Pruebe usted mismo

Dado que los emojis son caracteres, pueden copiarse, mostrarse y ajustarse de tamaño como cualquier otro carácter en HTML.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emojis amplificados</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>

Pruebe usted mismo

Algunos símbolos Emoji en UTF-8

Emoji Valor
🗻
🗼
🗽
🗾
🗿
😀
😁
😂
😃
😄
😅

Para obtener una lista completa, visite nuestro manual de referencia de Emoji de HTML.