Emojis are letters (characters) from the UTF-8 (Unicode) character set. The <meta charset=”UTF-8″> element in HTML defines the character set. Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers). To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).
Syntax:
<head>
<meta charset="UTF-8">
</head>
<body>
<p>&#number;</p>
// Take 'number' corresponding
// to UTF-8 characters you want
// to display.
</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.
Example: Represent the following emoji in a webpage.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>HTML Emojis </h2>
<p>😄</p>
<p>✌</p>
<p>🕞</p>
</body>
</html>
|
Output:
In the above example, the decimal reference used for the following emojis are as follows
| Char |
Decimal reference |
Hexadecimal reference |
| 😄 |
128516 |
1F604 |
| ✌ |
9996 |
270C |
| 🕞 |
128350 |
1F55E |
Note: Instead of decimal (dec) reference, one can also use hexadecimal(hex) reference to display emoji in a webpage. In addition to the above syntax, one need to include ‘x’ before hexadecimal reference.
Syntax:
<p>&#xhexaDecimal;</p>
Example: In this example, we will represent 😄, ✌ and 🕞 emoji in a webpage with hexadecimal(hex) reference.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>HTML Emojis</h2>
<p>😄</p>
<p>✌</p>
<p>🕞</p>
</body>
</html>
|
Output:
With hexadecimal reference also we are getting the same output.
Note: Since Emojis are characters, they can be copied, displayed and sized just like any other character in HTML.
Example: In this example, we will change the font size of the following emojis 😄, ✌ and 🕞.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>HTML Emojis with different font size </h2>
<p style="font-size:25px">😄 </p>
<p style="font-size:65px">✌</p>
<p style="font-size:75px">🕞</p>
</body>
</html>
|
Output: The output contains the different sizes of emojis.
Similarly any emoji can be displayed in a webpage by entering the corresponding decimal or hexadecimal reference in a code.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
27 Nov, 2020
Like Article
Save Article