Como Usar Emojis no Html | Desde seu humilde começo em 1999, Emojis está na moda nos dias de hoje. Não é mais algo que apenas pessoas com metade de nossa idade usam para se comunicar.

Você e eu os usamos o tempo todo, e quase todo bate-papo ou aplicativo relacionado a mensagens fornece um grande apoio para isso. Confira os detalhes no Guia-se Informativo.

Para os usuários comuns, os emojis são ótimos. Eles são divertidos e fáceis de usar. Para nós, desenvolvedores web que queremos usar emojis em nosso HTML, CSS e JavaScript, a história é um pouco diferente. Há algumas coisas que precisamos aprender a fazer, mas não se preocupe.

O que são Emojis Exatamente?

Como Utilizar Emojis no Html
Como Usar Emojis no Html

Já sabemos que os emojis são estes minúsculos ícones coloridos.

Embora isto possa lhe dar a impressão de que são imagens no sentido tradicional, não são.

Eles são mais como as letras, números, sinais de pontuação e símbolos estranhos que tendemos a baldear como texto:

Ao final deste tutorial, vou entrar em muito mais detalhes sobre o que são emojis e alguns dos detalhes sob as capas que os fazem funcionar. Por enquanto, basta saber o seguinte:

  • Eles são apenas personagens
  • Você pode selecioná-los, copiá-los, colá-los, ajustar seu tamanho, e assim por diante
  • Eles têm uma representação numérica mais primitiva que você pode usar para fazê-los exibir

Dizer que apenas arranhamos a superfície na compreensão dos emojis é um exagero, mas isto é suficiente para começarmos. É hora de ver os emojis em ação dentro de nossos documentos da web!

Como Usar Emojis no Html

Para usar emojis em HTML, a primeira coisa que precisamos fazer é definir a codificação de caracteres do documento para UTF-8. Isto assegura que nossos emojis sejam exibidos consistentemente em toda a variedade de navegadores e dispositivos que seus usuários possam estar rodando. Fazer isso é simples. Dentro de sua cabeça tag, certifique-se de especificar a seguinte meta tag:

<meta charset=”UTF-8″>

Uma vez que você tenha feito isso, agora vem a parte divertida de realmente ter um emoji para exibir. Você tem duas maneiras de poder fazer isso, cada uma com um grau de diversão variável. Uma maneira é usando o emoji diretamente em seu HTML. A outra maneira é especificando o emoji através de sua representação numérica primitiva. Analisaremos os dois casos.

Usando o Emoji diretamente

A maneira mais fácil de como usar emojis no HTML envolve simplesmente copiar e colar. Você só precisa de um aplicativo ou website que lhe permita copiar emojis em sua forma nativa, de caráter.

Um ótimo lugar para fazer isso é a Emojipedia. Você pode usar a Emojipedia para procurar ou navegar por qualquer emoji que você esteja procurando.

Como os emojis são tratados como conteúdo baseado em texto, você pode colá-los praticamente em qualquer lugar em seu documento onde o texto é suportado.

Agora, se esta é a primeira vez que você vê emojis aparecendo aleatoriamente dentro de seu código baseado em texto ou em seu editor de código, isto vai parecer um pouco estranho.

Seu ambiente tradicional só de texto, onde você escreveu sua marca durante todos estes anos, de repente terá algo visual nele. Não se preocupe. É legal. Quando você visualizar seu documento HTML em seu navegador, tudo ainda funcionará.

Antes de embrulharmos nosso olhar para emojis em HTML, vamos falar sobre acessibilidade. Emojis são artefatos visuais, mas eles são representados como texto sob as capas usando elementos como p e span que são semanticamente ambíguos neste caso.

Especificação do Código do Emoji

Se especificar o emoji diretamente não funcionar, há um caminho menos divertido que você pode tomar. Você pode usar a representação numérica do emoji, ou codepoint, em inglês, e especificá-la em seu markup.

Se você rolar para baixo na Emojipedia para qualquer emoji, você verá a representação numérica (mais formalmente conhecida como um codepoint) exibida

Para o emoji de hambúrguer, o codepoint é U+1F354. Para especificar este emoji em HTML usando o codepoint, temos que modificar um pouco o valor. Adicione os caracteres &#x, remova o U+1 do início do codepoint e simplesmente adicione os dígitos restantes do codepoint como parte de qualquer elemento de texto.

Conclusão

Se você conseguir escapar, copiar e colar emojis é a coisa mais fácil que você pode fazer em programação HTML. Haverá situações em que você não poderá fazer isso, então você é a abordagem de retorno envolvendo codepoints.

Há uma última coisa que pode ser importante para você. Como os emojis são nativos do aplicativo ou plataforma em que você está, os emojis podem parecer diferentes para diferentes usuários. Agora que você sabe como usar emojis no HTML, deixe seu comentário!