Emojis have become an integral part of modern web communication. They add emotion, personality, and visual interest to text content. In HTML, emojis can be used directly as Unicode characters, through HTML entities, or as images. This guide covers everything you need to know about using emojis in HTML, from basic implementation to best practices and accessibility considerations.
Using Emojis in HTML
The below examples demonstrate how to use emojis in HTML:
Direct Unicode Input
The simplest way to use emojis is to type them directly into your HTML code by holding down the "Windows" key and pressing the period (.) key on Windows, or using "Control + Command + Space" on Mac to open the emoji picker. You can then select the desired emoji to insert it into your HTML content. Here are some examples of direct emoji input in HTML:
<!-- Direct emoji input -->
<p>Hello World! 👋</p>
<p>I love pizza! 🍕</p>
<p>Great job! 🎉</p>
<p>Weather today: ☀️</p>
<p>Feeling happy 😊</p>HTML Entities for Emojis
Some emojis can also be represented using HTML numeric entities:
<!-- Using HTML entities -->
<p>Smiley face: 😀</p> <!-- 😊 -->
<p>Thumbs up: 👍</p> <!-- 👍 -->
<p>Heart: ❤</p> <!-- ❤️ -->
<p>Star: ⭐</p> <!-- ⭐ -->
<p>Fire: 🔥</p> <!-- 🔥 -->Hexadecimal Entities
Alternatively, you can use hexadecimal entities to represent emojis:
<!-- Using hexadecimal entities -->
<p>Smiley face: 😊</p> <!-- 😊 -->
<p>Thumbs up: 👍</p> <!-- 👍 -->
<p>Heart: ❤</p> <!-- ❤️ -->
<p>Star: ⭐</p> <!-- ⭐ -->
<p>Fire: 🔥</p> <!-- 🔥 -->Popular Emoji Categories
Emojis are categorized into various groups based on their themes. Below are some popular categories along with examples of commonly used emojis in each category.
Faces and Emotions
Emojis representing facial expressions and emotions are widely used to convey feelings and reactions in digital communication. Here are some examples of popular face emojis:
<!-- Smiling faces -->
<p>Grinning face: 😀</p>
<p>Smiling face with smiling eyes: 😄</p>
<p>Smiling face with halo: 😇</p>
<p>Smiling face with hearts: 🥰</p>
<p>Smiling face with tear: 🥲</p>
<!-- Neutral faces -->
<p>Neutral face: 😐</p>
<p>Expressionless face: 😑</p>
<p>Face without mouth: 😶</p>
<p>Rolling on the floor laughing: 🤣</p>
<p>Face with tears of joy: 😂</p>
<!-- Sad faces -->
<p>Loudly crying face: 😭</p>
<p>Crying face: 😢</p>
<p>Pleading face: 🥺</p>
<p>Disappointed face: 😞</p>
<p>Worried face: 😟</p>Gestures and Body Parts
Emojis depicting hand gestures and body parts are commonly used to express actions, greetings, and physical attributes. Here are some examples of popular gesture and body part emojis:
<!-- Hand gestures -->
<p>Thumbs up: 👍</p>
<p>Thumbs down: 👎</p>
<p>OK hand: 👌</p>
<p>Victory hand: ✌️</p>
<p>Raised hand: 🙋</p>
<p>Waving hand: 👋</p>
<p>Clapping hands: 👏</p>
<p>Open hands: 👐</p>
<!-- Body parts -->
<p>Brain: 🧠</p>
<p>Heart: ❤️</p>
<p>Lungs: 🫁</p>
<p>Eye: 👁️</p>
<p>Ear: 👂</p>
<p>Nose: 👃</p>
<p>Mouth: 👄</p>
<p>Tongue: 👅</p>Food and Drink Emojis
Emojis representing food and drink items are widely used to express dietary preferences and share meals in digital communication. Here are some examples of popular food and drink emojis:
Popular Food Items
Here are some commonly used food emojis:
<!-- Fruits -->
<p>Apple: 🍎</p>
<p>Banana: 🍌</p>
<p>Grapes: 🍇</p>
<p>Strawberry: 🍓</p>
<p>Watermelon: 🍉</p>
<p>Tangerine: 🍊</p>
<p>Lemon: 🍋</p>
<p>Pineapple: 🍍</p>
<!-- Vegetables -->
<p>Tomato: 🍅</p>
<p>Carrot: 🥕</p>
<p>Corn: 🌽</p>
<p>Hot pepper: 🌶️</p>
<p>Leafy green: 🥬</p>
<p>Broccoli: 🥦</p>
<p>Mushroom: 🍄</p>
<p>Eggplant: 🍆</p>
<!-- Prepared foods -->
<p>Pizza: 🍕</p>
<p>Hamburger: 🍔</p>
<p>Fries: 🍟</p>
<p>Hot dog: 🌭</p>
<p>Taco: 🌮</p>
<p>Burrito: 🌯</p>
<p>Ramen: 🍜</p>
<p>Spaghetti: 🍝</p>Beverages
Here are some commonly used drink emojis:
<!-- Hot drinks -->
<p>Coffee: ☕</p>
<p>Teacup without handle: 🍵</p>
<p>Sake: 🍶</p>
<p>Bottle with popping cork: 🍾</p>
<p>Wine glass: 🍷</p>
<p>Cocktail glass: 🍸</p>
<p>Tropical drink: 🍹</p>
<p>Beer mug: 🍺</p>
<!-- Cold drinks -->
<p>Clinking beer mugs: 🍻</p>
<p>Clinking glasses: 🥂</p>
<p>Tumbler glass: 🥃</p>
<p>Cup with straw: 🥤</p>
<p>Ice cream: 🍨</p>
<p>Shaved ice: 🍧</p>
<p>Ice cream: 🍦</p>
<p>Doughnut: 🍩</p>Animals and Nature Emojis
Emojis representing animals and nature elements are widely used to express affection for wildlife and appreciation for the natural world. Here are some examples of popular animal and nature emojis:
Animals
Here are some commonly used animal emojis:
<!-- Mammals -->
<p>Dog: 🐶</p>
<p>Cat: 🐱</p>
<p>Mouse: 🐭</p>
<p>Hamster: 🐹</p>
<p>Rabbit: 🐰</p>
<p>Fox: 🦊</p>
<p>Bear: 🐻</p>
<p>Panda: 🐼</p>
<p>Koala: 🐨</p>
<p>Tiger: 🐯</p>
<!-- Birds -->
<p>Chicken: 🐔</p>
<p>Rooster: 🐓</p>
<p>Hatching chick: 🐣</p>
<p>Baby chick: 🐤</p>
<p>Front-facing baby chick: 🐥</p>
<p>Bird: 🐦</p>
<p>Penguin: 🐧</p>
<p>Dove: 🕊️</p>
<p>Eagle: 🦅</p>
<p>Owl: 🦉</p>
<!-- Aquatic animals -->
<p>Fish: 🐟</p>
<p>Tropical fish: 🐠</p>
<p>Blowfish: 🐡</p>
<p>Shark: 🦈</p>
<p>Octopus: 🐙</p>
<p>Snail: 🐌</p>
<p>Butterfly: 🦋</p>
<p>Bug: 🐛</p>
<p>Ant: 🐜</p>
<p>Honeybee: 🐝</p>Nature Elements
Here are some commonly used nature emojis:
<!-- Weather -->
<p>Sun: ☀️</p>
<p>Cloud: ☁️</p>
<p>Umbrella: ☂️</p>
<p>Snowman: ⛄️</p>
<p>Comet: ☄️</p>
<p>Rainbow: 🌈</p>
<p>Lightning: ⚡</p>
<p>Tornado: 🌪️</p>
<p>Fog: 🌫️</p>
<p>Wind face: 🌬️</p>
<!-- Plants and trees -->
<p>Evergreen tree: 🌲</p>
<p>Deciduous tree: 🌳</p>
<p>Palm tree: 🌴</p>
<p>Cactus: 🌵</p>
<p>Herb: 🌿</p>
<p>Shamrock: 🍀</p>
<p>Four leaf clover: 🍀</p>
<p>Pine decoration: 🎄</p>
<p>Flower: 🌸</p>
<p>Blossom: 🌼</p>Travel and Places Emojis
Emojis representing travel and places are useful for expressing ideas about different locations and modes of transportation. Here are some examples:
Transportation
Here are some commonly used transportation emojis:
<!-- Vehicles -->
<p>Automobile: 🚗</p>
<p>Taxi: 🚕</p>
<p>Bus: 🚌</p>
<p>Trolleybus: 🚎</p>
<p>Fire engine: 🚒</p>
<p>Police car: 🚓</p>
<p>Ambulance: 🚑</p>
<p>Minibus: 🚐</p>
<p>Truck: 🚚</p>
<p>Articulated lorry: 🚛</p>
<!-- Air travel -->
<p>Airplane: ✈️</p>
<p>Small airplane: 🛩️</p>
<p>Airplane departure: 🛫</p>
<p>Airplane arrival: 🛬</p>
<p>Parachute: 🪂</p>
<p>Seat: 💺</p>
<p>Helicopter: 🚁</p>
<p>Suspension railway: 🚠</p>
<p>Mountain cableway: 🚡</p>
<p>>Aerial tramway: 🚟</p>
<!-- Water transport -->
<p>Ship: 🚢</p>
<p>Speedboat: 🚤</p>
<p>Sailboat: ⛵</p>
<p>Canoe: 🛶</p>
<p>Rowboat: 🛶</p>
<p>Motor boat: 🛥️</p>
<p>Ferry: ⛴️</p>
<p>Passenger ship: 🛳️</p>
<p>Anchor: ⚓</p>
<p>Ring buoy: 🛟️</p>Buildings and Places
Here are some commonly used building and place emojis:
<!-- Buildings -->
<p>House: 🏠</p>
<p>House with garden: 🏡</p>
<p>Office building: 🏢</p>
<p>Japanese post office: 🏣</p>
<p>Post office: 🏤</p>
<p>Hospital: 🏥</p>
<p>Bank: 🏦</p>
<p>Hotel: 🏨</p>
<p>Love hotel: 🏩</p>
<p>Convenience store: 🏪</p>
<!-- Landmarks -->
<p>Statue of Liberty: 🗽</p>
<p>Tokyo tower: 🗼</p>
<p>European castle: 🏰</p>
<p>Japanese castle: 🏯</p>
<p>Stadium: 🏟️</p>
<p>Ferris wheel: 🎡</p>
<p>Roller coaster: 🎢</p>
<p>Carousel: 🎠</p>
<p>Parasol on ground: ⛱️</p>
<p>Umbrella on ground: ⛱️</p>Activities and Sports Emojis
Emojis representing activities and sports are useful for expressing ideas about different physical activities and competitions. Here are some examples:
Sports
Here are some commonly used sports emojis:
<!-- Ball sports -->
<p>Basketball: 🏀</p>
<p>Football: 🏈</p>
<p>Baseball: ⚾</p>
<p>Tennis: 🎾</p>
<p>Volleyball: 🏐</p>
<p>Rugby football: 🏉</p>
<p>8-ball: 🎱</p>
<p>Billiards: 🎱</p>
<p>Ping pong: 🏓</p>
<p>Badminton: 🏸</p>
<!-- Other sports -->
<p>Golf: ⛳</p>
<p>Ice hockey: 🏒</p>
<p>Field hockey: 🏑</p>
<p>Cricket: 🏏</p>
<p>Ski: 🎿</p>
<p>Skier: ⛷️</p>
<p>Snowboarder: 🏂</p>
<p>Person surfing: 🏄</p>
<p>Person rowing boat: 🚣</p>
<p>Person swimming: 🏊</p>
<!-- Fitness -->
<p>Person lifting weights: 🏋️</p>
<p>Person bouncing ball: ⛹️</p>
<p>Person in lotus position: 🧘</p>
<p>Person doing cartwheel: 🤸</p>
<p>Person fencing: 🤺</p>
<p>People wrestling: 🤼</p>
<p>Person playing handball: 🤾</p>
<p>Person juggling: 🤹</p>
<p>Person in steamy room: 🧖</p>
<p>Person climbing: 🧗</p>Arts and Crafts
Here are some commonly used arts and crafts emojis:
<!-- Arts -->
<p>Artist palette: 🎨</p>
<p>Crayon: 🖍️</p>
<p>Notebook: 📓</p>
<p>Ledger: 📒</p>
<p>Closed book: 📕</p>
<p>Open book: 📖</p>
<p>Green book: 📗</p>
<p>Blue book: 📘</p>
<p>Orange book: 📙</p>
<p>Books: 📚</p>
<!-- Music -->
<p>Musical notes: 🎵</p>
<p>Multiple musical notes: 🎶</p>
<p>Microphone: 🎤</p>
<p>Headphone: 🎧</p>
<p>Radio: 📻</p>
<p>Saxophone: 🎷</p>
<p>Guitar: 🎸</p>
<p>Musical keyboard: 🎹</p>
<p>Trumpet: 🎺</p>
<p>Violin: 🎻</p>Objects and Symbols Emojis
Emojis representing objects and symbols are useful for adding visual interest and conveying meaning in various contexts. Here are some examples:
Technology
Here are some commonly used technology emojis:
<!-- Devices -->
<p>Mobile phone: 📱</p>
<p>Mobile phone with arrow: 📲</p>
<p>Telephone: ☎️</p>
<p>Telephone receiver: 📞</p>
<p>Pager: 📟</p>
<p>Fax machine: 📠</p>
<p>Battery: 🔋</p>
<p>Electric plug: 🔌</p>
<p>Laptop computer: 💻</p>
<p>Desktop computer: 🖥️</p>
<!-- Computer accessories -->
<p>Printer: 🖨️</p>
<p>Computer mouse: 🖱️</p>
<p>Trackball: 🖲️</p>
<p>Joystick: 🕹️</p>
<p>Compact disc: 💿</p>
<p>Dvd: 📀</p>
<p>Videocassette: 📼</p>
<p>Camera: 📷</p>
<p>Video camera: 📹</p>
<!-- Movie camera: 🎥</p>Office and School
Here are some commonly used office and school emojis:
<!-- Office supplies -->
<p>Briefcase: 💼</p>
<p>File folder: 📁</p>
<p>Open file folder: 📂</p>
<p>Card index dividers: 🗂️</p>
<p>Calendar: 📅</p>
<p>Tear-off calendar: 📆</p>
<p>Spiral notepad: 🗒️</p>
<p>Spiral calendar: 🗓️</p>
<p>Card index: 🗃️</p>
<p>Chart increasing: 📈</p>
<!-- School supplies -->
<p>Graduation cap: 🎓</p>
<p>Mortar board: 🎓</p>
<p>School: 🏫</p>
<p>Pencil: ✏️</p>
<p>Memo: 📝</p>
<p>Pushpin: 📌</p>
<p>Round pushpin: 📍</p>
<p>Paperclip: 📎</p>
<p>Straight ruler: 📏</p>
<p>Triangular ruler: 📐</p>Practical Usage Examples
Here are some practical ways to use emojis in your HTML documents:
Social Media and Communication
Emojis can enhance social media posts and messages, making them more engaging and expressive.
<!-- Status updates -->
<div class="status">
<p>Just finished my project! 🎉 So excited to share it with everyone! 🚀</p>
<p>Coffee time! ☕ Ready to tackle the day! 💪</p>
<p>Weekend vibes: 🏖️☀️🌊 Perfect beach day!</p>
<p>Movie night! 🍿🎬🍿 What should we watch? 🤔</p>
</div>
<!-- Reviews and ratings -->
<div class="review">
<h4>Restaurant Review</h4>
<p>Food: ⭐⭐⭐⭐⭐ Amazing! 🍕🍔🍟</p>
<p>Service: ⭐⭐⭐⭐ Friendly staff! 👍</p>
<p>Atmosphere: ⭐⭐⭐⭐ Great ambiance! 🎵</p>
<p>Will definitely come back! 😊</p>
</div>Navigation and UI Elements
Emojis can be used in navigation menus and user interface elements to make them more visually appealing and intuitive.
<!-- Navigation with emojis -->
<nav>
<ul>
<li><a href="#home">🏠 Home</a></li>
<li><a href="#profile">👤 Profile</a></li>
<li><a href="#messages">💬 Messages</a></li>
<li><a href="#settings">⚙️ Settings</a></li>
<li><a href="#help">❓ Help</a></li>
</ul>
</nav>
<!-- Status indicators -->
<div class="status-indicators">
<p>✓ Task completed successfully! 🎉</p>
<p>✘ Upload failed. Please try again. 😞</p>
<p>☀ Weather: Sunny, 25°C ☀️</p>
<p>☁ Weather: Cloudy, 18°C ☁️</p>
<p>☕ Coffee break time! ☕</p>
<p>a1; High priority task! ⚡</p>
</div>
<!-- Buttons with emojis -->
<div class="button-group">
<button>👍 Like</button>
<button>💬 Comment</button>
<button>🔗 Share</button>
<button>📧 Email</button>
<button>📱 Call</button>
<button>📍 Location</button>
</div>Educational Content
Emojis can be used in educational content to make it more engaging and visually appealing for learners.
<!-- Learning content -->
<div class="lesson">
<h3>Today's Lesson: Animals 🐾</h3>
<p>Let's learn about different animals! 🦁🐯🐻🐨🐼</p>
<h4>Mammals 🦁</h4>
<ul>
<li>Lion 🦁 - King of the jungle</li>
<li>Tiger 🐯 - Striped big cat</li>
<li>Bear 🐻 - Loves honey 🍯</li>
<li>Panda 🐼 - Eats bamboo 🎋</li>
</ul>
<h4>Birds 🦅</h4>
<ul>
<li>Eagle 🦅 - Soars high in the sky ☁️</li>
<li>Parrot 🦜 - Can talk! 🗣️</li>
<li>Penguin 🐧 - Loves cold weather ❄️</li>
<li>Owl 🦉 - Active at night 🌙</li>
</ul>
<p>Great job learning today! 🎉 Keep practicing! 💪</p>
</div>Accessibility Considerations
When using emojis, it's important to consider accessibility to ensure all users can understand the content.
<!-- Accessible emoji usage -->
<!-- Use ARIA labels for emojis -->
<span aria-label="Completed" role="img">✓</span>
<!-- Provide text alternatives -->
<button>
<span aria-hidden="true">👍</span>
<span class="sr-only">Like this post</span>
</button>
<!-- Use semantic HTML when possible -->
<!-- Instead of: ✓ Completed -->
<div class="status success">Completed</div>
<!-- Use emojis with descriptive text -->
<p>☀ Weather: Sunny, 25°C (Clear skies and sunshine)</p>
<p>☁ Weather: Cloudy, 18°C (Overcast conditions)</p>Browser Compatibility
While most modern browsers support emojis, some older browsers may not display them correctly. Here are some tips for ensuring better compatibility:
<!-- Test emoji compatibility -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Emojis Complete Reference</title>
<!-- CSS fallback for unsupported emojis -->
<style>
.emoji-fallback {
font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
}
.emoji-fallback::before {
content: attr(data-emoji);
}
/* Fallback for unsupported emojis */
@supports not (font-family: 'Apple Color Emoji') {
.emoji-fallback::before {
content: attr(data-fallback);
}
}
</style>
</head>
<body>
<!-- Modern emojis (may not work on older browsers) -->
<p>Modern emojis: 🦄🦋🦊🦋🦄</p>
<!-- Classic emojis (better compatibility) -->
<p>Classic emojis: 😊😂❤️⭐🎉</p>
<!-- Fallback options -->
<p>
<span class="emoji">🚀</span>
<span class="fallback">(Rocket)</span>
</p>
</body>
</html>
| Emoji | Meaning | HTML Code | Category / Usage |
|---|---|---|---|
| 🎉 | Celebration | 🎉 | Success / completion |
| 🚀 | Rocket / progress | 🚀 | Achievement / launch |
| 💪 | Strong / motivated | 💪 | Energy / productivity |
| 😊 | Happy smile | 😊 | Positive emotion |
| 🤔 | Thinking | 🤔 | Confusion / decision |
| ☀️ | Sun | ☀ | Sunny weather |
| 🌊 | Ocean waves | 🌊 | Beach / travel mood |
| 🏖️ | Beach | 🏖 | Vacation / weekend |
| 🍕 | Pizza | 🍕 | Food / restaurant |
| 🍔 | Burger | 🍔 | Fast food |
| 🍟 | Fries | 🍟 | Snacks / food review |
| 🍿 | Popcorn | 🍿 | Movie night |
| 🍩 | Doughnut | 🍩 | Dessert / sweets |
| ☕ | Coffee | ☕ | Break / energy |
| 🎬 | Movie | 🎬 | Entertainment |
| 🎵 | Music | 🎵 | Audio / mood |
| 🎮 | Gaming | 🎮 | Games / fun |
| 🎨 | Art palette | 🎨 | Design / creativity |
| 📷 | Camera | 📷 | Photography |
| 👍 | Like | 👍 | Approval |
| 👎 | Dislike | 👎 | Disapproval |
| ❤️ | Love | ❤ | Support / love |
| ⭐ | Star rating | ⭐ | Reviews / rating |
Complete Emoji Reference Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Emojis Complete Reference</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.emoji-card {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease;
}
.emoji-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.emoji-display {
font-size: 3em;
margin-bottom: 10px;
line-height: 1;
}
.emoji-name {
font-weight: bold;
color: #495057;
margin-bottom: 5px;
}
.emoji-code {
font-family: 'Courier New', monospace;
background-color: #e9ecef;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.9em;
color: #6c757d;
}
.category {
margin: 40px 0;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}
.category h2 {
color: #007bff;
margin-top: 0;
}
.interactive-demo {
background-color: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 20px;
margin: 30px 0;
border-radius: 4px;
}
.button-group {
display: flex;
gap: 10px;
margin: 15px 0;
flex-wrap: wrap;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.btn-primary:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
#emojiOutput {
background-color: #2d3748;
color: #e2e8f0;
padding: 15px;
border-radius: 4px;
font-family: 'Courier New', monospace;
margin: 15px 0;
min-height: 100px;
white-space: pre-wrap;
font-size: 14px;
}
.example-section {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 20px;
margin: 20px 0;
border-radius: 4px;
}
.example-section h3 {
color: #856404;
margin-top: 0;
}
.emoji-text {
font-size: 1.2em;
margin: 10px 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML Emojis Complete Reference</h1>
<div class="category">
<h2>Smiling Faces & Emotions</h2>
<div class="emoji-grid">
<div class="emoji-card">
<div class="emoji-display">😀</div>
<div class="emoji-name">Grinning Face</div>
<div class="emoji-code">😀</div>
</div>
<div class="emoji-card">
<div class="emoji-display">😊</div>
<div class="emoji-name">Smiling Face</div>
<div class="emoji-code">😊</div>
</div>
<div class="emoji-card">
<div class="emoji-display">😂</div>
<div class="emoji-name">Face with Tears</div>
<div class="emoji-code">😂</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🥰</div>
<div class="emoji-name">Smiling Face with Hearts</div>
<div class="emoji-code">🥰</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🤣</div>
<div class="emoji-name">Rolling on Floor</div>
<div class="emoji-code">🤣</div>
</div>
<div class="emoji-card">
<div class="emoji-display">😍</div>
<div class="emoji-name">Heart Eyes</div>
<div class="emoji-code">😍</div>
</div>
</div>
</div>
<div class="category">
<h2>Animals & Nature</h2>
<div class="emoji-grid">
<div class="emoji-card">
<div class="emoji-display">🐶</div>
<div class="emoji-name">Dog</div>
<div class="emoji-code">🐶</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🐱</div>
<div class="emoji-name">Cat</div>
<div class="emoji-code">🐸</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🐼</div>
<div class="emoji-name">Panda</div>
<div class="emoji-code">🐨</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🦁</div>
<div class="emoji-name">Lion</div>
<div class="emoji-code">🦁</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🦊</div>
<div class="emoji-name">Fox</div>
<div class="emoji-code">🦊</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🦋</div>
<div class="emoji-name">Butterfly</div>
<div class="emoji-code">🦋</div>
</div>
</div>
</div>
<div class="category">
<h2>Food & Drink</h2>
<div class="emoji-grid">
<div class="emoji-card">
<div class="emoji-display">🍕</div>
<div class="emoji-name">Pizza</div>
<div class="emoji-code">🍕</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🍔</div>
<div class="emoji-name">Hamburger</div>
<div class="emoji-code">🍔</div>
</div>
<div class="emoji-card">
<div class="emoji-display">☕</div>
<div class="emoji-name">Coffee</div>
<div class="emoji-code">☕</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🍎</div>
<div class="emoji-name">Apple</div>
<div class="emoji-code">🍎</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🍓</div>
<div class="emoji-name">Strawberry</div>
<div class="emoji-code">🍓</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🍩</div>
<div class="emoji-name">Doughnut</div>
<div class="emoji-code">🍛</div>
</div>
</div>
</div>
<div class="category">
<h2>Activities & Sports</h2>
<div class="emoji-grid">
<div class="emoji-card">
<div class="emoji-display">⚽</div>
<div class="emoji-name">Soccer Ball</div>
<div class="emoji-code">⚽</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🏀</div>
<div class="emoji-name">Basketball</div>
<div class="emoji-code">🏀</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🎮</div>
<div class="emoji-name">Video Game</div>
<div class="emoji-code">🎮</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🎵</div>
<div class="emoji-name">Musical Note</div>
<div class="emoji-code">🎵</div>
</div>
<div class="emoji-card">
<div class="emoji-display">🎨</div>
<div class="emoji-name">Artist Palette</div>
<div class="emoji-code">🎨</div>
</div>
<div class="emoji-card">
<div class="emoji-display">📷</div>
<div class="emoji-name">Camera</div>
<div class="emoji-code">📷</div>
</div>
</div>
</div>
<div class="interactive-demo">
<h3>Interactive Emoji Generator</h3>
<p>Click the buttons below to see different emoji categories and their HTML entities:</p>
<div class="button-group">
<button class="btn btn-primary" onclick="showFaces()">Faces</button>
<button class="btn btn-primary" onclick="showAnimals()">Animals</button>
<button class="btn btn-primary" onclick="showFood()">Food</button>
<button class="btn btn-primary" onclick="showTravel()">Travel</button>
<button class="btn btn-primary" onclick="showActivities()">Activities</button>
<button class="btn btn-primary" onclick="showObjects()">Objects</button>
</div>
<div id="emojiOutput">Click a button to see emoji examples...</div>
</div>
<div class="example-section">
<h3>Practical Usage Examples</h3>
<h4>Social Media Post</h4>
<div class="emoji-text">
Just finished my workout! 💪 Feeling great! 🎉 Now time for some healthy food 🥗 and coffee ☕
</div>
<h4>Navigation Menu</h4>
<div class="emoji-text">
🏠 Home | 👤 Profile | 💬 Messages | ⚙️ Settings | ❓ Help
</div>
<h4>Status Indicators</h4>
<div class="emoji-text">
✅ Task completed | ❌ Upload failed | ☀️ Weather: Sunny | ☕ Coffee break time!
</div>
<h4>Educational Content</h4>
<div class="emoji-text">
Today we're learning about animals! 🦁🐯🐻🐼🐨
Lions 🦁 are the kings of the jungle! 🌿
Pandas 🐼 love bamboo! 🎋
Butterflies 🦋 are beautiful insects! 🌸
</div>
</div>
<div class="example-section">
<h3>Accessibility Examples</h3>
<h4>Accessible Button</h4>
<button>
<span aria-hidden="true">👍</span>
<span class="sr-only">Like this post</span>
</button>
<h4>Accessible Status</h4>
<p>
<span aria-label="Completed" role="img">✅</span>
Task completed successfully!
</p>
<h4>Accessible Weather</h4>
<p>
<span aria-label="Sunny weather" role="img">☀️</span>
Weather: Sunny, 25°C
</p>
</div>
</div>
<script>
function showFaces() {
const output = document.getElementById('emojiOutput');
output.innerHTML = `Smiling Faces & Emotions:
😀 Grinning Face: 😀
😊 Smiling Face: 😊
😂 Face with Tears: 😂
🤣 Rolling on Floor: 🤣
😍 Heart Eyes: 😍
🥰 Smiling with Hearts: 🥰
😘 Face Blowing a Kiss: 😘
😗 Kissing Face: 😗
😚 Kissing Face with Closed Eyes: 😖`;
}
function showAnimals() {
const output = document.getElementById('emojiOutput');
output.innerHTML = `Animals & Nature:
🐶 Dog: 🐶
🐱 Cat: 🐸
🐼 Panda: 🐨
🦁 Lion: 🦁
🦊 Fox: 🦊
🐻 Bear: 🐻
🐨 Koala: 🐫
🐯 Tiger: 🐺
🦋 Butterfly: 🦋
🐝 Honeybee: 🐞`;
}
function showFood() {
const output = document.getElementById('emojiOutput');
output.innerHTML = `Food & Drink:
🍕 Pizza: 🍕
🍔 Hamburger: 🍔
🍟 Fries: 🍟
🌮 Taco: 🌮
🍪 Cookie: 🍪
☕ Coffee: ☕
🍎 Apple: 🍎
🍌 Banana: 🍌
🍓 Strawberry: 🍓
🍩 Doughnut: 🍛`;
}
function showTravel() {
const output = document.getElementById('emojiOutput');
output.innerHTML = `Travel & Places:
🚗 Automobile: 🚗
✈️ Airplane: ✈
🏨 Hotel: 🏦
🏖️ Beach: 🏖
🏔 Mountain: 🏞
🌉 Ferris Wheel: 🎠
🎢 Roller Coaster: 🎞
🏛️ Classical Building: 🏫
🗽 Statue of Liberty: 😆`;
}
function showActivities() {
const output = document.getElementById('emojiOutput');
output.innerHTML = `Activities & Sports:
⚽ Soccer Ball: ⚽
🏀 Basketball: 🏀
🎮 Video Game: 🎮
🎵 Musical Note: 🎵
🎨 Artist Palette: 🎨
📷 Camera: 📷
🎬 Movie Camera: 🎞
🎤 Microphone: 🎣`;
}
function showObjects() {
const output = document.getElementById('emojiOutput');
output.innerHTML = `Objects & Symbols:
💻 Laptop: 💻
📱 Mobile Phone: 📱
⌚ Clock: 🕐
💡 Light Bulb: 💡
🔑 Key: 🔑
🔐 Locked: 🔒
📚 Books: 📖`;
}
</script>
</body>
</html>