Utiliser des Emojis en HTML


Qu'est-ce que les Emojis ?

Les Emojis ressemblent à des images, mais ce ne sont pas des images.

Les Emojis sont des lettres (caractères) de l'ensemble de caractères UTF-8 (Unicode) :

😄 😍 💗

UTF-8 couvre presque tous les caractères et symboles du monde.

Emoji Valeur
🗻 🗻 Essayer »
🗼 🗼 Essayer »
🗽 🗽 Essayer »
🗾 🗾 Essayer »
🗿 🗿 Essayer »
😀 😀 Essayer »
😁 😁 Essayer »
😂 😂 Essayer »
😃 😃 Essayer »
😄 😄 Essayer »
😅 😅 Essayer »

Exemples d'Emojis en HTML

Émoticônes

😀 😂 😊 😎 😜

Mains

✌ ✊ ☝ ✋ 👌

Personnes

👮 🧕 👦 💏 🤴

Bureau

📈 💻 📌 📆 📒

Lieux

⛺ 🌋 🗽 🗿 🏢

Transport

🚈 🚗 🚢 🚌 🚀

Animaux

🐴 🐕 🐘 🐻 🐞

Nourriture

☕ 🌭 🍞 🍩 🍣

Plantes

🌴 🌳 🌼 🍁 🥑

Fruits

🍇 🍊 🍏 🥝 🥥

Sports

⚽ 🏆 🤿 🏋 ⛳

Terre & Ciel

🌐 🌍 🌖 🌟 🌞

Météo

⛅ ☔ 🌈 🌂 ⛄

Vêtements

👚 👕 🎩 👜 👠

Audio/Video

🎥 🎵 🎹 🔊 📺

Célébration

🎁 🎃 🎈 🎓 🎂

Divertissement

🎨 🎪 🎭 🎡 🎢

Symboles

💡 💰 🔐 🔞 🔔


L'attribut charset HTML

Pour afficher correctement une page HTML, un navigateur web doit connaître l'ensemble de caractères utilisé dans la page.

Cela est spécifié dans la <meta> balise :

<meta charset="UTF-8">

Si ce n'est pas spécifié, UTF-8 est l'ensemble de caractères par défaut en HTML.


Caractères UTF-8

De nombreux caractères UTF-8 ne peuvent pas être tapés sur un clavier, mais ils peuvent toujours être affichés en utilisant des nombres (appelés numéros d'entité) :

  • A est 65
  • B est 66
  • C est 67

Exemple

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

<p>Je vais afficher A B C</p>
<p>Je vais afficher &#65; &#66; &#67;</p>

</body>
</html>
Essayez-le vous-même »

Exemple expliqué

L'élément <meta charset="UTF-8"> définit l'ensemble de caractères.

Les caractères A, B et C sont affichés par les nombres 65, 66 et 67.

Pour permettre au navigateur de comprendre que vous affichez un caractère, vous devez commencer le numéro d'entité par &# et le terminer par ; (point-virgule).



Caractères Emoji

Les Emojis sont également des caractères de l'alphabet UTF-8 :

  • 😄 est 128516
  • 😍 est 128525
  • 💗 est 128151

Exemple

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

<h1>Mon Premier Emoji</h1>

<p>&#128512;</p>

</body>
</html>
Essayez-le vous-même »

Puisque les Emojis sont des caractères, ils peuvent être copiés, affichés et dimensionnés tout comme n'importe quel autre caractère en HTML.

Exemple

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

<h1>Emojis Dimensionnés</h1>

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

</body>
</html>
Essayez-le vous-même »