bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
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)

This chapter

Overview
56

Lessons

191m

Read time

1. HTML Tutorial2. HTML Introduction3. HTML Editors4. HTML Elements5. HTML Attributes6. HTML Headings7. HTML Paragraphs8. HTML Styles9. HTML Text Formatting10. HTML Comments11. HTML Colors12. HTML RGB and RGBA Colors13. HTML HEX Colors14. HTML HSL and HSLA Colors15. HTML Styles - CSS16. HTML Links17. HTML Links - Different Colors18. HTML Links - Create Bookmarks19. HTML Images20. HTML Image Maps21. HTML Background Images22. HTML <picture> Element23. HTML Favicon24. HTML Page Title25. HTML Tables26. HTML Table Borders27. HTML Table Sizes28. HTML Table Headers29. HTML Table Padding & Spacing30. HTML Table Colspan & Rowspan31. HTML Table Styling32. HTML Table Colgroup33. HTML Lists34. HTML Unordered Lists35. HTML Ordered Lists36. HTML Other Lists37. HTML Block and Inline Elements38. HTML Div Element39. HTML class Attribute40. HTML id Attribute41. HTML Buttons42. HTML Iframes43. HTML JavaScript44. HTML File Paths45. HTML - The Head Element46. HTML Layout Elements and Techniques47. HTML Responsive Web Design48. HTML Computer Code Elements49. HTML Semantic Elements50. HTML Style Guide51. HTML Entities52. HTML Symbols53. Using Emojis in HTML54. HTML Encoding (Character Sets)55. HTML Uniform Resource Locators56. HTML Versus XHTML

On this page

What are Emojis?The HTML charset AttributeUTF-8 CharactersExample ExplainedEmoji Characters