HTML - Emojis

Emojis are allowed to include in our webpages to represent emotions in plain text. Emojis are widely used in social media, messaging apps, and web pages to add some humour and feelings to the text. For example, 😈, 😁, 😉

What are Emojis?

Emojis are small graphical symbols or icons that represent emotions, objects, animals, flags, nature, food items and many more related entities. Although emojis looks like graphical symbols, they are actually characters of the UTF-8 character set.

UTF-8 Emojis

Emoji	Hexadecimal Code	Decimal Code
😈	😈	😈
😂	😂	😂
👍	👍	👍
😁	😁	😁
😃	😃	😃
😇	😇	😇
😉	😉	😉
😍	😍	😍
😭	😭	😭
😘	😘	😘
😢	😢	😢
🙂	🙂	🙂
😪	😪	😪
😷	😷	😷

How to add Emojis to 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 character 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
Using Hexadecimal Code

Using Decimal Code to add Emojis

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>

Using Hexadecimal Code to add Emojis

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>

Drawbacks of using HTML Emojis

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.

Print Page