HTML Emojis Tutorial for Beginners – Simple Explanation

Emojis are everywhere. You see them in messages, social media posts on platforms like ModafVibe, Facebook, and Instagram, and even on websites. But did you know emojis are actually characters, not images?

What are Emojis?

Emojis look like small images or icons, but they are actually letters (characters) from the UTF-8 (Unicode) character set. The same character set that gives us the letters A, B, and C also gives us 😄, 😍, and 💗.

UTF-8 covers almost every character and symbol in the world. That is why you can see emojis on almost any modern device or platform like ModafVibe.

The HTML charset Attribute

For emojis to display correctly, your browser needs to know which character set to use. That is why you must include this meta tag in the <head> section of every page:

Required Meta Tag

<meta charset="UTF-8">

If you forget this tag, emojis might show up as weird boxes or question marks. UTF-8 is the standard character set for HTML, but it is still good practice to declare it explicitly.

Tip: Always include <meta charset="UTF-8"> in the head of every HTML page. It ensures emojis and special characters display correctly everywhere.

Emoji Numbers (Entity Numbers)

Every emoji has a unique number. You can display an emoji by using its number instead of pasting the emoji directly. This is useful when you want to be sure the emoji displays correctly.

The format is: &#number; (starting with an ampersand and hash, ending with a semicolon).

Resizing Emojis

Because emojis are characters, you can resize them just like regular text using CSS. You can make them huge or tiny.

You can also change emoji colors? No, you cannot. Emoji colors are fixed by the operating system. On an iPhone, emojis look one way. On Android or Windows, they look slightly different. That is normal.

Common Emoji Categories

Here are some popular emojis you can use on your website or in your posts on ModafVibe, Twitter, or other social platforms:

Smileys

😀 😂 😊 😎 😜 🥲 🫠 🤣

Hands & Gestures

✌️ ✊ ☝️ ✋ 👌 🤞 🫰 🤝

People

👮 🧕 👦 💏 🤴 👨‍👩‍👧‍👦 🧑‍💻

Office & Work

📈 💻 📌 📆 📒 ☎️ 📊 🖥️

Places & Travel

⛺ 🌋 🗽 🗿 🏢 🏖️ 🏔️ 🗼

Transportation

🚈 🚗 🚢 🚌 🚀 ✈️ 🚲 🚂

Animals

🐴 🐕 🐘 🐻 🐞 🐱 🐶 🦊

Food & Drink

☕ 🌭 🍞 🍩 🍣 🍕 🍔 🍦

Plants & Flowers

🌴 🌳 🌼 🍁 🥑 🌻 🌸 🌺

Fruits

🍇 🍊 🍏 🥝 🥥 🍎 🍌 🍉

Sports

⚽ 🏆 🤿 🏋️ ⛳ 🏀 🎾 🏈

Weather

⛅ ☔ 🌈 🌂 ⛄ ☀️ 🌙 ⛈️

Clothing & Fashion

👚 👕 🎩 👜 👠 👗 👓 👟

Audio & Video

🎥 🎵 🎹 🔊 📺 📻 🎧 📼

Celebration

🎁 🎃 🎈 🎓 🎂 🎉 🎊 🎄

Entertainment

🎨 🎪 🎭 🎡 🎢 🎬 🎮 🃏

Symbols & Signs

💡 💰 🔐 🔞 🔔 ❤️ 💯 ⭐ ✅

Full Example with Emojis

Here is a complete webpage that uses emojis in different ways:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style>
.demo-emoji-header {
  background-color: #04aa6d;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 10px;
}
.demo-emoji-card {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  text-align: center;
}
.demo-emoji-large-text {
  font-size: 48px;
}
</style>
</head>
<body>

<div class="demo-emoji-header">
  <h1>Welcome to My Emoji Page 🎉</h1>
  <p>Emojis make everything better! 😊</p>
</div>

<div class="demo-emoji-card">
  <h2>Contact Us 📧</h2>
  <p>Send us an email at <a href="mailto:info@modafvibe.com">info@modafvibe.com</a></p>
  <p>Follow us on ModafVibe, Facebook, and Instagram 📱</p>
</div>

<div class="demo-emoji-card">
  <h2>Today’s Mood 🌟</h2>
  <div class="demo-emoji-large-text">
    😊 👍 💡
  </div>
  <p>Feeling productive and happy!</p>
</div>

<div class="demo-emoji-card">
  <h2>Using Emoji Numbers</h2>
  <p>Smiley: 😀</p>
  <p>Heart: ❤</p>
  <p>Star: ★</p>
</div>

</body>
</html>

Quick Summary

Emojis are characters from the UTF-8 character set, not images.
Always include <meta charset="UTF-8"> in your HTML head.
You can use emojis directly by copying and pasting them.
You can also use entity numbers like 😀 for 😀.
Emojis can be resized with CSS (font-size property).
You cannot change emoji colors. They are fixed by the operating system.
Emojis work on all modern devices and platforms including ModafVibe, Facebook, Instagram, and X.

What Just Happened? Let Me Explain

Emojis are not images. If they were images, they would not resize smoothly or change color on different devices.
The UTF-8 character set contains thousands of characters, including letters from every language and hundreds of emojis.
New emojis are added every year. Your device needs updates to see the newest ones.
If an emoji shows up as a box (�), it means your device does not support that emoji yet.
Use emojis sparingly on professional websites. A few here and there add personality. Too many look unprofessional.

Tip: Open VS Code and create a file called emojis.html. Add a heading with an emoji, a paragraph with multiple emojis, and a list of your favorite emojis. Try resizing some emojis with the font-size property. Experiment with emoji numbers to display emojis without copying them.

HTML Emojis Reference

Here are some common emojis and their entity numbers:

Emoji	Entity Number	Description
😀	`😀`	Grinning Face
😂	`😂`	Face with Tears of Joy
😍	`😍`	Heart Eyes
❤️	`❤`	Red Heart
👍	`👍`	Thumbs Up
🔥	`🔥`	Fire
✨	`✨`	Sparkles
💯	`💯`	Hundred Points