HTML Emoji
In HTML, emoji can be easily added to a webpage in different ways. You can include them directly as characters, use their Unicode values, or apply HTML entities. Here’s a breakdown of how to use emojis in HTML:Direct Use of Emoji Characters
You can simply copy and paste the emoji directly into your HTML code.Example:
<!DOCTYPE html>
<head>
<title>Emoji Example</title>
</head>
<body>
<h1>Emojis in HTML 🌟😊👦🚀</h1>
<p>This is a smiley face 😊, a star 🌟, and a rocket 🚀!</p>
</body>
</html>
<head>
<title>Emoji Example</title>
</head>
<body>
<h1>Emojis in HTML 🌟😊👦🚀</h1>
<p>This is a smiley face 😊, a star 🌟, and a rocket 🚀!</p>
</body>
</html>
Output:
Using Unicode in HTML
Every emoji has a unique Unicode code point, which can be used in HTML by writing &#x followed by the hexadecimal Unicode value. Here’s an example with a few emojis and their Unicode values:Example:
<!DOCTYPE html><head>
<title>Emoji with Unicode</title>
</head>
<body>
<h1>Unicode Emojis</h1>
<p>This is a smiley face: 😊 </p>
<p>This is a heart: ❤ </p>
<p>This is a thumbs-up: 👍 </p>
<p>This is a rocket: 🚀 </p>
</body>
</html>
Output:
Using HTML Entities
HTML entities can represent some emojis or special characters. However, most emojis require Unicode values since HTML entities for emojis are not as common. Here's an example with a heart symbol:
Example:
<!DOCTYPE html>
<head>
<title>Emoji using HTML Entities</title>
</head>
<body>
<h1>HTML Entity Emoji</h1>
<p>This is a heart: ♥ </p>
</body>
</html>
<head>
<title>Emoji using HTML Entities</title>
</head>
<body>
<h1>HTML Entity Emoji</h1>
<p>This is a heart: ♥ </p>
</body>
</html>
Output:
Emoji CSS Support
You can use emojis as part of your CSS content as well, either directly or using Unicode.
Example:
<!DOCTYPE html>
<head>
<title>CSS Emoji Example</title>
<style>
.emoji:before {
content: "😊"; /* Direct Emoji */
font-size: 50px;
display: block;
}
.unicode-emoji:before {
content: "\1F44D"; /* Thumbs-up Unicode Emoji */
font-size: 50px;
display: block;
}
</style>
</head>
<body>
<h1>CSS Emojis</h1>
<div class="emoji"></div>
<div class="unicode-emoji"></div>
</body>
</html>
<head>
<title>CSS Emoji Example</title>
<style>
.emoji:before {
content: "😊"; /* Direct Emoji */
font-size: 50px;
display: block;
}
.unicode-emoji:before {
content: "\1F44D"; /* Thumbs-up Unicode Emoji */
font-size: 50px;
display: block;
}
</style>
</head>
<body>
<h1>CSS Emojis</h1>
<div class="emoji"></div>
<div class="unicode-emoji"></div>
</body>
</html>
Output:
Here is a list of popular emojis that you can use in HTML, along with their Unicode values. You can use them directly in HTML or with their Unicode code points (
&#x; or &#; notation).Smiley Faces and Emotions:
Hand Gestures:
Hearts and Love:
Animals:
Food and Drink:
Nature and Weather:
Transport:
