How to use Emoji in HTML

What Are Emojis?

Emojis are small, colorful symbols or icons that represent various emotions, objects, or concepts. They are widely used in text messages, social media, and online communication to express feelings, reactions, and ideas. Emojis can be a great way to make your web content more relatable and visually appealing.

Adding Emojis to Your HTML Content

Step 1:

Add head "charset" tag in head section

<head>
                
   <meta charset="utf-8">
                
 </head>

Step 2:

Decimal Characters table for HTML code

Emoji	Decimal Value	Name
👸	👸	princess
😀	😀	grinning face
😁	😁	grinning face with smiling eyes
😂	😂	face with tears of joy
😃	😃	smiling face with open mouth
😄	😄	smiling face with open mouth and smiling eyes
😅	😅	smiling face with open mouth and cold sweat
😆	😆	smiling face with open mouth and tightly-closed eyes
😇	😇	smiling face with halo
😉	😉	winking face
😊	😊	smiling face with smiling eyes
😋	😋	face savouring delicious food
😍	😍	smiling face with heart-shaped eyes
😎	😎	smiling face with sunglasses
😏	😏	smirking face
😓	😓	face with cold sweat
😗	😗	kissing face
😘	😘	face throwing a kiss
😛	😛	face with stuck-out tongue
😜	😜	face with stuck-out tongue and winking eye
😝	😝	face with stuck-out tongue and tightly-closed eyes
😡	😡	pouting face
😤	😤	face with look of triumph
😥	😥	disappointed but relieved face
😨	😨	fearful face
😫	😫	tired face
😬	😬	grimacing face
😭	😭	loudly crying face
😱	😱	face screaming in fear
😲	😲	astonished face
😴	😴	sleeping face
😷	😷	face with medical mask
🙂	🙂	slightly smiling face
🙄	🙄	face with rolling eyes
🤑	🤑	money-mouth face
🤔	🤔	thinking face
🤕	🤕	face with head-bandage
🤗	🤗	hugging face
🤣	🤣	rolling on the floor laughing
🤴	🤴	prince

Emojis and Accessibility

While using emojis can be fun and engaging, it's important to consider accessibility. Some users may have difficulty perceiving or understanding emojis. To address this, provide alternative text or descriptions for emojis to ensure your content remains accessible to all.

Conclusion

Adding emojis to your HTML content is a creative way to inject personality and emotion into your web pages. Whether you're designing a personal blog, e-commerce site, or any other type of website, emojis can make your content more relatable and engaging. Experiment with different emojis and styles to find the perfect balance for your audience.

Remember to use emojis in moderation and consider accessibility for all users. With these tips, you can take your web content to the next level and connect with your audience on a more emotional level.

If you found this guide helpful, please share it with others and start expressing yourself with emojis in your HTML content! 😊 🌟