HTML TutorialLesson #38

HTML Emojis

Emojis look like images, but they are not.

What are Emojis?

Emojis look like images, but they are not.

Emojis are letters (characters) from the UTF-8 (Unicode) character set:

😄 😍 💗

UTF-8 covers almost all of the characters and symbols in the world.

EmojiValue
🗻🗻
🗼🗼
🗽🗽
🗾🗾
🗿🗿
😀😀
😁😁
😂😂
😃😃
😄😄
😅😅

HTML Emojis Examples

Smileys

😀 😂 😊 😎 😜

Hands

✌ ✊ ☝ ✋ 👌

People

👮 🧕 👦 💏 🤴

Office

📈 💻 📌 📆 📒

Places

⛺ 🌋 🗽 🗿 🏢

Transport

🚈 🚗 🚢 🚌 🚀

Animals

🐴 🐕 🐘 🐻 🐞

Food

☕ 🌭 🍞 🍩 🍣

Plants

🌴 🌳 🌼 🍁 🥑

Fruits

🍇 🍊 🍏 🥝 🥥

Sports

⚽ 🏆 🤿 🏋 ⛳

Earth & Sky

🌐 🌍 🌖 🌟 🌞

Weather

⛅ ☔ 🌈 🌂 ⛄

Clothing

👚 👕 🎩 👜 👠

Audio/Video

🎥 🎵 🎹 🔊 📺

Celebration

🎁 🎃 🎈 🎓 🎂

Entertainment

🎨 🎪 🎭 🎡 🎢

Symbols

💡 💰 🔐 🔞 🔔

Learn More:

Full HTML Emoji Reference


The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

Example

Example Code

html
Try it Yourself
<meta charset="UTF-8">

If not specified, UTF-8 is the default character set in HTML.


UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

  • A is 65
  • B is 66
  • C is 67

Example

Example Code

html
Try it Yourself
Live Output Preview:

Example Explained

The <meta charset="UTF-8"> element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).


Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

  • 😄 is 128516
  • 😍 is 128525
  • 💗 is 128151

Example

Example Code

html
Try it Yourself
Live Output Preview:

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example

Example Code

html
Try it Yourself
Live Output Preview:

Interactive Code Examples

Example 1

html
Try it Yourself
HTML tag syntax and structure demonstration.
<meta charset="UTF-8">

HTML Example 2

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 3

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 4

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview: