How to add emoji in HTML document ?
Last Updated :
16 Jan, 2024
Emojis are the characters from the Unicode character set that look like images or icons ????????????♂️. They can be sized, copied, or pasted like any other character in HTML. UTF-8 is the default charset that is used in HTML documents because it contains almost all of the characters and symbols.
Emojis can be inserted in HTML documents by specifying charset to UTF-8 that will be used while displaying the web pages in the browser. This character encoding information is specified by using the <meta> tag in the head section. After the declaration of the charset, emojis can be added in HTML by using <p> and <span> tags. <p> tag is used to insert the emoji in a new line whereas <span> tag inserts the emoji in the same line.
Note: If you want to add emojis on Windows, you can press the Windows key and the period key ( . ) at the same time.
There are three methods to insert emojis in an HTML document:
Using Hexadecimal code:
Emojis can be added to HTML documents by specifying their hexadecimal code within the required tags. These codes start with &#x and end with; to inform the browser that the character represented by the hexadecimal code has to be displayed.
Hexadecimal codes are preferred than decimal codes to be used in HTML because they ensure the portability and consistency of the document in the long run.
Example: In this example, we will see the implementation of the above approach with an example using hexadecimal code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emoji List:</h1>
<p>Grinning face : <span> 😀 </span> </p>
<p>Face having tears of joy : <span> 😂 </span> </p>
<p>Fire : <span> 🔥 </span> </p>
<p>Thumbs up : <span> 👍 </span> </p>
<p>Bell : <span> 🔔 </span> </p>
</body>
</html>
|
Output:
Emojis added using hexadecimal code
Using Decimal code:
Emojis can be added in HTML document by specifying their decimal code within the required tags. These codes start with &# and end with ; to inform the browser that the character represented by the decimal code has to be displayed.
Example: In this example, we will see the implementation of the above approach with an example using decimal code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emoji List:</h1>
<p>Grinning face : <span> 😀 </span> </p>
<p>Face having tears of joy : <span> 😂 </span> </p>
<p>Fire : <span> 🔥 </span> </p>
<p>Thumbs up : <span> 👍 </span> </p>
<p>Bell : <span> 🔔 </span> </p>
</body>
</html>
|
Output:
Emojis added using decimal code
Copy from External Source:
Emojis can be added to HTML documents by copying it from some external source and directly pasting it into code. This method is preferred when an emoji can’t be represented by a single codepoint instead requires a combination of multiple codepoints. In this case, it is better to directly copy-paste the required emoji from some external source.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emoji List:</h1>
<p>Grinning face : <span> ???? </span> </p>
<p>Face having tears of joy : <span> ???? </span> </p>
<p>Fire : <span> ???? </span> </p>
<p>Thumbs up : <span> ???? </span> </p>
<p>Bell : <span> ???? </span> </p>
</body>
</html>
|
Output:
Emojis copied from external source
Note: Same emoji can be displayed in different formats by different browsers. Also, some browsers may not support the latest emojis released by Unicode for some time and in that case, it will be replaced by a rectangular box.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...