HTML Emojis
As we know, Unicode is a universal character encoding system that assigns a unique code point to every character, symbol, or emoji, ensuring consistent representation across all devices and platforms. Emojis, too, are nothing more than special Unicode characters that browsers visually render as images. In HTML, emojis can be inserted either directly as characters or using their respective Unicode escape sequences (e.g., 😀 for 😀). While they appear as colorful icons, behind the scenes, they are simply text with assigned code points. Today, over 90% of websites use Unicode (UTF-8) encoding, highlighting its critical role in maintaining multilingual and emoji-rich content across the web.
Note: Emojis are just special Unicode characters displayed as images.
Adding Emojis in HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>UTF-8 Character Example</title>
</head>
<body>
<!-- Direct Putting Emoji as a character -->
<p>Here is a smiley face: 😊</p>
<!-- Using unicode Escape -->
<p>Here is a smiley face: 😊</p>
</body>
</html>
Output
HTML Emojis Examples
1. HTML Emojis using Unicode Decimal reference
HTML Emojis are represented using Unicode decimal references like 😄 to display emojis, enabling the rendering of various symbols and icons in web content.
Example 1: Represent the following emoji in a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Emojis Example</title>
</head>
<body>
<h1>HTML Emojis Example</h1>
<p>
😄 This is a smiling face with open mouth
and smiling eyes emoji.
</p>
<p>✌ This is a victory hand emoji.</p>
<p>⌚ This is a watch emoji.</p>
</body>
</html>
Code Overview
- In the above example we define the document type with <!DOCTYPE html>. Set charset with <meta charset="UTF-8">.
- Ensure proper display across devices with <meta name="viewport" content="width=device-width, initial-scale=1.0">.
- 😄 : Smiling face with open mouth and smiling eyes.
- ✌️: Victory hand emoji.
- ⌚: Watch emoji.
- Emojis represented using Unicode values in HTML.
Output
| Emoji | Decimal | Hexadecimal |
|---|---|---|
| 😄 | 128516 | 1F604 |
| ✌ | 9996 | 270C |
| ⌚ | 128350 | 1F55E |
2. HTML Emojis using Unicode hexadecimal reference
HTML Emojis are displayed using Unicode hexadecimal references like 😄, allowing the inclusion of diverse symbols and icons in web content.
Syntax
<p>&#xhexaDecimal;</p>Example 2: In this example, we will represent 😄, ✌and 🕞 emoji in a webpage with hexadecimal(hex) reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Emojis Example</title>
</head>
<body>
<h1>HTML Emojis Example using Unicode hexadecimal </h1>
<p>
😄 This is a smiling face with open mouth
and smiling eyes emoji
</p>
<p>✌ This is a victory hand emoji</p>
<p>⌚ This is a watch emoji</p>
</body>
</html>
Output
Code Overview
- In the above example we defined with <!DOCTYPE html> and <html lang="en">.
- Unicode hexadecimal references used for emojis, like 😄, ✌, and ⌚.
- Emojis represented by Unicode code points, enclosed in &#x and ;.
- Each emoji has a unique hexadecimal Unicode value.
- Emojis render according to their Unicode representations in modern web browsers.
Note: Since Emojis are characters, they can be copied, displayed and sized just like any other character in HTML.
Change Size of Emoji Using CSS
Example 3: In this example, we will change the font size of the following emojis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Emojis Example</title>
<style>
.large {
font-size: 2em;
/* Increase font size */
}
</style>
</head>
<body>
<h1>HTML Emojis Example</h1>
<h3>Transport symbols</h3>
<p>
🚂 Train
<span class="large">🛥</span> Tram
</p>
<h3>Office emojis</h3>
<p>
🏢 Office Building
<span class="large">💼</span> Laptop
</p>
<h3>People emojis</h3>
<p>
👨 Man
<span class="large">👩</span> Woman
</p>
<h3>People emojis</h3>
<p>
🐶 Dog
<span class="large">🦁</span> Lion
</p>
</body>
</html>
Code Overview
- In the above example we defines various emojis using Unicode hexadecimal references.
- Emojis are categorised into transport symbols, office emojis, people emojis, and animal emojis.
- Each category includes two emojis, with every second emoji being larger in size.
- CSS is used to increase the font size of the larger emojis.
- The emojis are displayed alongside descriptive text to indicate their meaning or representation.
Output: The output contains the different sizes of emojis.
HTML Emojis Examples
| HTML Emojis | Symbols |
|---|---|
| HTML Emoji Food Symbols | 🍕 🍔 🌮 🍩 🍎 |
| HTML Emoji Transport Symbols | 🚗 ✈️ 🚂 🚲 🚢 |
| HTML Emoji Plant Symbols | 🌵 🌻 🌲 🌼 🌱 |
| HTML Emoji Office Symbols | 🖥️ 📠 🖋️ 📅 📋 |
| HTML Emoji People Symbols | 👨💻 👩⚕️ 🧑🎓 👨🏫 👩🚀 |
| HTML Emoji Animals Symbols | 🐱 🐶 🦁 🐘 🐸 |
| HTML Emoji Places Symbols | 🏙️ 🏖️ 🏞️ 🏰 🗽 |
| HTML Emoji Face Symbols | 😀 😁 😍 😎 🤔 |
