Uso de Emojis no HTML

Emojis (Emoji) são caracteres do conjunto de caracteres UTF-8:  

O que é Emoji?

Emojis (Emoji) são semelhantes a imagens ou ícones, mas não são.

Eles são letras (caracteres) do conjunto de caracteres UTF-8 (Unicode).

Dica:O UTF-8 abrange quase todos os caracteres e símbolos do mundo.

Atributo charset do HTML

Para exibir corretamente a página HTML, o navegador web deve saber qual conjunto de caracteres está sendo usado na página.

Isto é em <meta> Especificado no marcador:

<meta charset="UTF-8">

Dica:Se não especificado, o UTF-8 é o conjunto de caracteres padrão no HTML.

Caracteres UTF-8

Muitos caracteres UTF-8 não podem ser digitados no teclado, mas sempre podem ser exibidos usando números (conhecidos como números de entidade):

  • A é 65
  • B é 66
  • C é 67

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Eu vou mostrar A B C</p>
<p>Eu vou mostrar A B C</p>
</body>
</html>

Experimente você mesmo

Exemplos de Explicação

<meta charset="UTF-8"> O elemento define o conjunto de caracteres.

Os caracteres A, B, C são exibidos pelos números 65, 66 e 67.

Para que o navegador saiba que você está exibindo caracteres, você deve começar com um & e terminar com ; (ponto e vírgula) o número da entidade.

Caracteres Emoji

Os emojis também são caracteres de UTF-8:

  •  é 128516
  •  é 128525
  •  é 128151

Exemplo

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

Experimente você mesmo

Como os emojis são caracteres, podem ser copiados, exibidos e ajustados em tamanho da mesma forma que outros caracteres no HTML.

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emojis Ampliados</h1>
<p style="font-size:48px">
😅 😆 🔆 🏴
</p>
</body>
</html>

Experimente você mesmo

Alguns Emojis no UTF-8

Emoji Valor
😅 😅
😅 😅
😅 😅
😅 😅
😅 😅
😅 😅
😅 😅
😅 😅
😅 😅
😅 😆
🔆 😍

Para uma lista completa, acesse nosso Manual de Referência de Emoji do HTML.