<!–

main_leaderboard, all: [728,90][970,90][320,50][468,60]

–>

Uso de emojis HTML

Neste artigo, discutiremos emojis HTML . UTF-8 é o conjunto de caracteres usado pelos emojis: 😄 😠ðŸ'—

O que são Emojis?

Apesar de sua aparência, os emojis não são imagens ou ícones. Esses caracteres vêm do conjunto de caracteres UTF-8 (Unicode).

A maioria dos caracteres e símbolos do mundo pode ser codificada usando UTF-8.



O atributo HTML charset

Os navegadores da Web precisam conhecer o conjunto de caracteres usado em uma página HTML para retratá-lo com precisão. Aqui está um exemplo de emojis HTML :

Existe uma especificação para isso na tag <meta> :

<meta charset=”UTF-8″>

Nota: A menos que especificado de outra forma, o HTML usa UTF-8 como seu conjunto de caracteres padrão.


Caracteres UTF-8

Emojis HTML podem mostrar caracteres UTF-8 que não podem ser documentados com números de entidade

  • x é 88
  • Y é 89
  • Z é 90

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body><p>Output will be X Y Z</p>
<p>Output will be X Y Z</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo explicado

O elemento <meta charset=”UTF-8″> representa o conjunto de caracteres.

Os caracteres X, Y e Z são indicados pelos números 88, 89 e 90.

Sempre que exibir um caractere, você deve iniciar o número da entidade com e terminar com ; (ponto e vírgula).


Emojis

Um caractere UTF-8 também é um emoji:

  • 😄 é 129410
  • 😠é 129411
  • ðŸ'— é 129412

Example

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body><h1>Example Emoji</h1><p>🦑</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O HTML permite que você copie, exiba e dimensione Emojis como qualquer outro personagem.

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body><h1>Sized Emojis</h1><p style="font-size:48px">
😉 😊 😋 😍
</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo do caractere emoji:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emoji</h1>
<p>
😄
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O CSS também pode ser aplicado ao conjunto de emojis aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
font-size: 25px;
background-color: aqua;
}
</style>
</head>
<body>
<h1>Emoji</h1>
<p>
😄 😅😆😇
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Alguns símbolos Emoji em UTF-8

Emoji Valor
🗼 🗼
🗻 🗻
🗽 🗽
😀 😀
😄 😄
😅 😅
🗿 🗿
🗾 🗾
😠😁
😃 😃
😂 😂
Dica: você pode encontrar uma lista completa de tags HTML em nossa Referência de tags HTML.

Uso de Emojis em Documento HTML

Emojis são um tipo de símbolo que pode ser usado para adicionar interesse visual e contexto emocional ao texto em documentos HTML. Emojis podem ser inseridos em documentos HTML usando códigos de caracteres Unicode, que representam uma imagem de emoji específica.

Para inserir um emoji em um documento HTML, o código de caractere Unicode do emoji desejado deve ser incluído no código do texto. Por exemplo, o código de caractere Unicode para um emoji de rosto sorridente é “U+1F600” e pode ser adicionado ao código HTML da seguinte forma: “ 😄”. Este código exibirá o emoji de rosto sorridente no documento HTML.

Os emojis podem ser usados ​​para dar ênfase ou transmitir emoção em texto, como em postagens de mídia social ou aplicativos de mensagens. Eles também podem ser usados ​​para melhorar a acessibilidade do conteúdo para pessoas com deficiência, como deficiências visuais, que podem se beneficiar das dicas visuais adicionais fornecidas pelos emojis.

No entanto, é importante usar emojis de forma adequada e com moderação, pois o uso excessivo ou indevido de emojis pode reduzir o profissionalismo e a clareza do conteúdo. Além disso, nem todos os navegadores ou dispositivos da Web oferecem suporte a todos os caracteres emoji, por isso é importante testar a compatibilidade antes de usar emojis em documentos HTML.

Se este artigo em algum lugar atendeu às suas necessidades educacionais, assine nosso boletim informativo abaixo para ficar cercado pelas informações técnicas deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone