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>
<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:
List Of Emojis
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
More topic in HTML
