Using Emojis in HTML

Emojis are characters from the UTF-8 character set: ? ? ?

HTML Emojis Examples

?????

?????

?????

?????

Emojis look like images, or icons, but they are not.

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

UTF-8 covers almost all of the characters and symbols in the world.

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

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

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

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

<p>I will display A B C</p>
<p>I will display A B C</p>

</body>
</html>

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

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

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Emojis are also characters from the UTF-8 alphabet:

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

<h1>My First Emoji</h1>

<p>😀</p>

</body>
</html>

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

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

<h1>Sized Emojis</h1>

<p style="font-size:48px">
😀 😄 😍 💗
</p>

</body>
</html>