Introduction
An emoji is a graphical icon commonly employed in HTML to represent feelings, concepts, or notions. Emojis are often integrated into HTML files to enhance the visual appeal for users, enriching textual content with expressive elements through the use of emojis.
Emojis are represented using Unicode characters, with each character having a distinct code. HTML texts can incorporate these Unicode characters by utilizing their corresponding Unicode values.
Syntax
<head>
<meta charset="UTF-8">
</head>
<body>
<p>&#number;</p>
</body>
Emojis are considered as UTF-8 characters, and you can incorporate them into HTML following a similar syntax as demonstrated above. Refer to the example syntax provided along with the respective emoji and its decimal (dec) or hexadecimal (hex) representations.
The HTML charset Attribute
For a web browser to display an HTML page correctly, it must recognize the character set being used.
The following is mentioned in the tag:
<meta charset="UTF-8">
UTF-8 Characters
The following UTF-8 characters are always displayed as numbers or entity numbers, even though many of them cannot be typed on a keyboard:
- A is 65
- B is 66
- C is 67
Example
<html>
<meta charset="UTF-8">
<body>
<p>This is normal A B C</p>
<p>This is with codes: A B C</p>
</body>
</html>
Output
Explanation
The character set is specified using the element.
The numerical values 65, 66, and 67 correspond to the alphabetical characters A, B, and C, respectively.
At the beginning, it's necessary to denote the entity number with the ampersand symbol (&), and when referencing a character at the end of a line, it's important to conclude with a semicolon (;) to indicate to the browser that a character is being specified.
Emoji Characters
UTF-8 characters are also used in emojis:
- ? is 128516
- ? is 128525
- ? is 128151
Example
<html>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>?</p
</body>
</html>
Output
Emojis are a type of characters that behave similarly to other characters in terms of copying, modifying, and rendering in HTML.
<html>
<meta charset="UTF-8">
<body>
<h2>Some of the different types of Emojis</h2>
<p style="font-size:48px">
? ? ? ?
</p>
</body>
</html>
Output
HTML Emojis using Unicode hexadecimal reference
One can incorporate a range of symbols and icons into digital content through the utilization of Unicode hexadecimal references to display HTML Emojis.
Syntax
<p>&#xhexaDecimal;</p>
Example:
<!DOCTYPE html>
<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 an open mouth and smiling eyes emoji
</p>
<p> ✌ This is a victory hand emoji</p>
<p> ⌚ This is the emoji of a watch</p>
</body>
</html>
Output
Explanation
- Our definitions of <!DOCTYPE html> and <html lang="en"> are shown in the example above.
- Emojis, such as ?, ✌, ⌚, are represented by Unicode hexadecimal references.
- Unicode code points encapsulated in &#x and ; represent emojis.
- The Unicode value of each emoji is distinct in hexadecimal.
- In current web browsers, emojis display in accordance with their Unicode equivalents.
Some Popular Emojis with Their Codes
| Emoji | Name | Code |
|---|---|---|
| 😂 | Face with Tears of Joy | ? |
| ❤ | Black Heart | ❤ |
| 😍 | Smiling Face with Heart-Shaped Eyes | ? |
| 🙏 | Folded Hands of a person | ? |
| 🤣 | Rolling On The Floor Laughing | ? |
| 💕 | Two Hearts | ? |
| 😭 | Loudly Crying Face | ? |
| 🔥 | Fire | ? |
| 😘 | Face Throwing a Kiss | ? |
| 👍 | Thumbs Up | ? |
Conclusion
Embedding emoji codes in HTML can be an enjoyable and efficient method to enhance the visual appeal of the user interface and convey emotions to the user. Developers can utilize Unicode characters or HTML entities to incorporate emojis into web content, resulting in a more vibrant and contextually rich user experience. It is essential to ensure compatibility across various browsers and devices to ensure consistent emoji representation. Adhering to coding standards and specifications enhances the design of emojis, making web communication more engaging and expressive, ultimately enhancing their relevance and usability in web environments.