Using Emojis in HTML

Emojis are characters from the UTF-8 character set: 飿?飿?飹?/p>

What is Emoji?

Emojis are similar to images or icons, but they are not.

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

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

HTML charset attribute

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

This is in <meta> Specified in the tag:

<meta charset="UTF-8">

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

UTF-8 characters

Many UTF-8 characters cannot be entered on the keyboard, but they can always be displayed using numbers (known as 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 A B C</p>
</body>
</html>

Try It Yourself

Examples Explain

<meta charset="UTF-8"> Elements define the character set.

Characters A, B, C are displayed by numbers 65, 66, and 67.

To let the browser know you are displaying a character, you must start with an ampersand (&) and end with a semicolon (;) to end the entity number.

Emoji Characters

Emojis are also 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>😀</p>
</body>
</html>

Try It Yourself

Since emojis are characters, they can be copied, displayed, and resized like any other character in HTML.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Enlarged Emojis</h1>
<p style="font-size:48px">
馃槄 馃槅 馃攩 馃彽
</p>
</body>
</html>

Try It Yourself

Some Emoji symbols in UTF-8

Emoji Value
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槄
馃槄 馃槅
馃攩 馃槏

For a complete list, please visit our HTML Emoji Reference Manual.