HTML - Emojis

What are Emojis?

Emojis are small graphical symbols or icons that represent emotions, objects, animals, flags, nature, food items and many more related entities. They are widely used in social media, messaging apps, and web pages to add some humour and feelings to the text. Although emojis looks like graphical symbols, they are actually characters of the UTF-8 character set.

The drawback of using emojis in HTML documents is that these characters are not directly available for our use. There are no specific keys available on the computer keyboards. We are required to memorize or look up their respective codes.

How to add Emojis into an HTML document?

To add emojis into an HTML document, our first step should be defining the character encoding for the web page. For this purpose, we use the charset attribute of <meta> tag. Note that <meta> tag is used within the <head> tag. The most appropriate value for the charset attribute is UTF-8 as it covers over a million characters including the emojis.

The charcter encoding is specified by the following <meta> tag −

<meta charset = "UTF-8">

There are two ways of adding emojis to the HTML document −

Using Decimal Code

We can add emojis into the HTML document using their corresponding decimal codes. These codes start with &#, ends with ";" and in-between they contain numerics.

Example

In the following example, we are going to display a few emojis on the web page using their respective decimal codes.

<!DOCTYPE html>
<html>
<head>
   <title>Emojis in HTML</title>
   <meta charset="UTF-8">
</head>
<body>
   <h2>Adding emojis in HTML document using decimal code</h2>
   <div>
      <p>Devil Emoji: <span>&#128520;</span>
      </p>
      <p>Face having Tears of Joy Emoji: <span>&#128514;</span>
      </p>
      <p>Thumbs Up Emoji: <span>&#128077;</span>
      </p>
   </div>
</body>
</html>

On executing the above HTML code, it will produce a web page containing specified emojis.

Using Hexadecimal Code

We can also specify emojis using their respective hexadecimal codes. The hexadecimal codes for emojis start with &#x and end with ";" to inform the browser the character represented by the code needs to be displayed.

Example

The following example illustrates the use of hexadecimal codes in displaying emojis.

<!DOCTYPE html>
<html>
<head>
   <title>Emojis in HTML</title>
   <meta charset="UTF-8">
</head>
<body>
   <h2>Adding emojis in HTML document using Hexadecimal code</h2>
   <div>
      <p>Devil Emoji: <span>&#X1F608;</span>
      </p>
      <p>Face having Tears of Joy Emoji: <span>&#x1F602;</span>
      </p>
      <p>Thumbs Up Emoji: <span>&#x1F44D;</span>
      </p>
   </div>
</body>
</html>

If we run the above HTML code, it will produce a web page containing specified emojis.

Common Emojis with their Decimal and Hexadecimal Code

The following table contains the emojis and their corresponding codes −

Emoji	Hexadecimal Code	Decimal Code
😈	&#X1F608;	😈
😂	😂	😈
👍	👍	😈
😁	😁	😁
😃	😃	😃
😇	😇	😇
😉	😉	😉