Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

HTML Emojis

  • Difficulty Level : Basic
  • Last Updated : 27 Nov, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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

CharDecimal referenceHexadecimal reference
😄1285161F604
9996270C
🕞1283501F55E

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :