HTML emojis refer to graphical representations of emotions, objects, symbols, and more. It can be displayed using Unicode characters or emoji entities within HTML documents. They add visual context and enhance communication on web pages, emails, and messaging platforms.
The <meta charset=”UTF-8″> element defines the character set. Unreachable UTF-8 characters displayed with entity numbers starting with &# and ending with ; .
Syntax:
<head>
<meta charset="UTF-8">
</head>
<body>
<p>&#number;</p> <!--number corresponding to UTF-8 character -->
</body>Emojis are also characters from the UTF-8 alphabet and can be used in HTML by mentioning the corresponding emoji, decimal (dec) or hexadecimal (hex) reference in the above syntax.
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>
|
Output:
HTML Emoji
Explanation:
- 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.
| Char | Decimal reference | Hexadecimal reference |
|---|---|---|
| 😄 | 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:
HTML Emojis using Unicode hexadecimal
Explanation:
- 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.
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>
|
Output: The output contains the different sizes of emojis.
Html Emoji Example
Explanation:
- In the above example we defines various emojis using Unicode hexadecimal references.
- Emojis are categorized 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.
HTML Emojis Use Cases
1. How to add emoji in HTML document ?
To add emojis in an HTML document, use Unicode hexadecimal references or decimal references within the content, using “&#x” followed by the emoji code for hexadecimal, or “&#NNNN” for decimal.
2. Create a Emoji Generator Using HTML CSS & JavaScript
Create an Emoji Generator by allowing users to select emojis from a list or input field, using HTML for structure, CSS for styling, and JavaScript for interactivity and functionality.
3. Text to Emoji Translator using HTML CSS and JavaScript
Build a Text to Emoji Translator where users input text and receive corresponding emojis, employing HTML for layout, CSS for styling, and JavaScript for text-to-emoji conversion and interaction.
4. How to apply emoji hex code in list-style type to create custom list point ?
To apply emoji hex code in list-style type for custom list points, use CSS `list-style-type` property with the Unicode hexadecimal value of the desired emoji, like `list-style-type: ‘\1F603’;`.