bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/HTML/HTML Foundations
HTMLโ€ขHTML Foundations

Using Emojis in HTML

What are Emojis?

Emojis look like images, but they are not.

Emojis are letters (characters) from the UTF-8 (Unicode) character set:

๐Ÿ˜„ ๐Ÿ˜ ๐Ÿ’—

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

EmojiValue
๐Ÿ—ป🗻
๐Ÿ—ผ🗼
๐Ÿ—ฝ🗽
๐Ÿ—พ🗾
๐Ÿ—ฟ🗿
๐Ÿ˜€😀
๐Ÿ˜😁
๐Ÿ˜‚😂
๐Ÿ˜ƒ😃
๐Ÿ˜„😄
๐Ÿ˜…😅

Learn More

Full HTML Emoji Reference

The HTML charset Attribute

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:

<meta charset="UTF-8">

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

UTF-8 Characters

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

  • A is 65
  • B is 66
  • C is 67

Example

Formatted code
<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<body>

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

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

</body>

</html>

Live preview

Example Explained

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).

Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

  • ๐Ÿ˜„ is 128516
  • ๐Ÿ˜ is 128525
  • ๐Ÿ’— is 128151

Example

Formatted code
<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>

Live preview

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

Example

Formatted code
<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<body>

<h1>Sized Emojis</h1>

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

</body>
</html>

Live preview

Previous

HTML Symbols

Next

HTML Encoding (Character Sets)