Using Emojis in HTML

HTML Emojis are characters from the UTF-8 person set: ? ? ?

Emojis are letters (characters) from the UTF-8 (Unicode) character set. The <meta charset=”UTF-8″> element in HTML defines the character set. Numerous UTF-8 characters can’t be typed on a keyboard, however they can generally be shown using numbers (called entity numbers). To allow the browser to comprehend that you are showing a character, you should begin the entity number with &# and end it with ; (semicolon).

In this article, you will learn-

1 What are Emojis?
2 The HTML charset Attribute
3 UTF-8 Characters
4 Emoji Characters
5 Some Emoji Symbols in UTF-8

What are Emojis?

Emojis look like pictures, or icon, however they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

UTF-8 covers almost the entirety of the characters and symbols on the world.

The HTML charset Attribute

To display an HTML page accurately, an internet browser should realize the character set used in the page.

This is indicated in the <meta> tag:

<meta charset="UTF-8">

If not indicated, UTF-8 is the default character set in HTML.

UTF-8 Characters

Numerous UTF-8 characters can’t be typed on a keyboard, however they can generally be shown using numbers (called entity numbers):

• A is 65

• B is 66

• C is 67

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>I will display A B C</p>
<p>I will display &#65; &#66; &#67;</p>

</body>
</html>

Example Explained

The <meta charset=”UTF-8″> element defines the character set.

The characters A, B, and C, are shown by the numbers 65, 66, and 67.

To allow the browser to comprehend that you are showing a character, you should begin the entity number with &# and end it with ; (semicolon).

Emoji Characters

Emoticons are additionally characters from the UTF-8 alphabet:

• ? is 128516

• ? is 128525

• ? is 128151

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>

Since Emojis are characters, they can be copied, shown, and sized just like some other character in HTML.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>Sized Emojis</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

Some Emoji Symbols in UTF-8

Emoji Value

? 😀

? 😁

? 😂

? 😃

? 😄

? 😅

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.