Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add emoji in HTML document?
Emojis are small digital images or icons that are generally used in messaging and other places to express emotions or ideas. In this article, we are going to see how we can add emojis to an HTML document.
Approach
By setting the charset used to display webpages in the browser to UTF-8, emojis can be added to HTML documents. We can use the <meta> tag in the head section to specify this character encoding information. Emojis can be added to HTML after the charset has been declared by utilising the p and span tags. While the emoji is inserted in the same line using the <span> tag, it is inserted in a new line using the <p> tag.
We are going to take a look at two methods to add emoji in HTML document −
Using hexadecimal code
Using decimal code
Method 1: Using Hexadecimal Code
We can specify emoji's 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. For instance, the hexadecimal code for ✌is ✌
Example
Step 1 − First we will define the basic HTML code.
<!DOCTYPE html> <html> <head> <title>How to add emoji in HTML document?</title> </head> <body> <h4>How to add emoji in HTML document?</h4> </body> </html>
Step 2 − Now we will add the hexadecimal codes for emojis.
<div> <p>Devil Emoji: <span>😈</span></p> <p>Face having Tears of Joy Emoji: <span>😂</span></p> <p>Thumbs Up Emoji: <span>👍</span></p> </div>
Here is the complete code −
<!DOCTYPE html>
<html>
<head>
<title>How to add emoji in HTML document?</title>
</head>
<body>
<h4>How to add emoji in HTML document?</h4>
<div>
<p>Devil Emoji: <span>😈</span></p>
<p>Face having Tears of Joy Emoji: <span>😂</span></p>
<p>Thumbs Up Emoji: <span>👍</span></p>
</div>
</body>
</html>
Method 2: Using Decimal Code
We can also make use of the decimal code representation of emoji's. These codes start with &# and ends with ; just like hexadecimal codes. For instance, the decimal code for 👀 is 👀.
Example
Step 1 − First we will define the basic HTML code.
<!DOCTYPE html> <html> <head> <title>How to add emoji in HTML document?</title> </head> <body> <h4>How to add emoji in HTML document?</h4> </body> </html>
Step 2 − Now we will add the decimal codes for emojis.
<div> <p>Devil Emoji: <span>😈</span></p> <p>Face having Tears of Joy Emoji: <span>😂</span></p> <p>Thumbs Up Emoji: <span>👍</span></p> </div>
Here is the complete code −
<!DOCTYPE html>
<html>
<head>
<title>How to add emoji in HTML document?</title>
</head>
<body>
<h4>How to add emoji in HTML document?</h4>
<div>
<p>Devil Emoji: <span>😈</span></p>
<p>Face having Tears of Joy Emoji: <span>😂</span></p>
<p>Thumbs Up Emoji: <span>👍</span></p>
</div>
</body>
</html>
Conclusion
In this article, we saw how we can add emoji's in an HTML document. We had a brief look at two representations of emoji's namely the hexadecimal and decimal codes, We also saw how with the help of those representations we can actually add emoji's in our webpages.
3K+ Views
To Continue Learning Please Login