HTML Tutorial: HTML Emojis
Learn how to use emojis in HTML using Unicode codes and named entities with colorful inputs and outputs
Emojis add visual expression to your web pages. You can use Unicode decimal, hexadecimal, or named HTML entities to display emojis.
1️⃣ Using Decimal Unicode
INPUT:
<p>Smiley Face </p>
<p>Thumbs Up </p>
OUTPUT:
Smiley Face 😀
Thumbs Up 👍
✔️ Decimal Unicode uses format
✔️ Displays emojis correctly in modern browsers
2️⃣ Using Hexadecimal Unicode
INPUT:
<p>Heart ❤</p>
<p>Star ⭐</p>
OUTPUT:
Heart ❤
Star ⭐
✔️ Hexadecimal Unicode uses ❤ or ⭐
✔️ Useful for emoji references in code documentation
3️⃣ Using Named Entities
INPUT:
<p>Smiley & happy </p>
<p>Party 🎉 & celebration </p>
OUTPUT:
Smiley & happy 😄
Party 🎉 & celebration 🎉
✔️ Combine emojis with text and other symbols ✔️ Can use decimal, hexadecimal, or direct copy-paste emojis
4️⃣ Colorful Example with Multiple Emojis
INPUT:
<p style="color:#0077cc;">Success ✅ Task Completed</p>
<p style="color:#ff6600;">Warning ⚠ Check your input</p>
<p style="color:#cc0066;">Error ❌ Something went wrong</p>
OUTPUT:
Success ✅ Task Completed
Warning ⚠ Check your input
Error ❌ Something went wrong
✔️ Emojis can enhance visual cues ✔️ Combine with colored text for better UX
5️⃣ Best Practices for HTML Emojis
- Use Unicode codes for cross-browser compatibility
- Prefer named entities for readability when available
- Combine emojis with colors for visual feedback
- Keep emoji usage consistent across pages
- Do not overuse; maintain professional readability
🚀 What’s Next?
👉 HTML Charsets
Next lesson will cover:
- Declaring character encoding in HTML
- UTF-8 and other charsets
- Ensuring proper display of text, symbols, and emojis
Using HTML emojis effectively enhances user experience, makes content more engaging, and conveys emotion clearly in web pages.