Understanding Emoji
Emoji are Unicode characters and character sequences used to represent emotions, people, objects, animals, activities, symbols, flags, and many other ideas in digital communication.
Because emoji are part of Unicode, they can be placed directly in HTML text without loading separate image files. They can appear in headings, paragraphs, links, buttons, form labels, and many other places where text is allowed.
What Are Emoji?
Emoji are text characters that display as small graphical symbols when supported by the operating system, browser, and available fonts. Although they often look like images, standard Unicode emoji are not image files embedded in the webpage.
For example, an emoji can be entered directly inside a paragraph:
<p>Welcome to my website! 😀</p>The browser interprets the emoji as part of the text and displays the appropriate emoji artwork supplied by the user's system.
Emoji and Unicode
Unicode is a character-encoding standard that assigns characters unique numeric values called code points. Emoji are included in Unicode along with letters, numbers, punctuation, mathematical symbols, and characters used by writing systems around the world.
Unicode code points are commonly written with U+ followed by a hexadecimal value. For example, the grinning face emoji 😀 has the code point:
U+1F600Some emoji use a single code point, while others are formed from sequences of multiple Unicode characters. You will learn more about these sequences on the Emoji Components page.
Emoji and UTF-8
HTML documents should use UTF-8 character encoding so browsers can correctly interpret Unicode characters, including emoji.
Declare UTF-8 near the beginning of the document's <head> with:
<meta charset="utf-8">A basic HTML document containing emoji can therefore be written as:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Emoji Example</title>
</head>
<body>
<h1>Hello! 👋</h1>
</body>
</html>Adding Emoji to HTML
The simplest way to use an emoji in HTML is to enter or paste it directly into the document just as you would ordinary text.
<h1>Welcome 😀</h1>
<p>The weather looks great today! ☀️</p>
<button type="button">Save 💾</button>Direct emoji characters are usually the easiest to read and maintain in your HTML source when your files use UTF-8.
Emoji Character References
Emoji can also be written with numeric HTML character references. A character reference identifies the Unicode character by its numeric value instead of placing the character directly in the source.
The grinning face 😀 has the Unicode code point U+1F600. Its hexadecimal HTML character reference is:
😀Its decimal HTML character reference is:
😀All three forms below produce the same emoji:
| Method | HTML | Result |
|---|---|---|
| Direct Character | 😀 |
😀 |
| Hexadecimal | 😀 |
😀 |
| Decimal | 😀 |
😀 |
Direct characters are convenient for everyday HTML, while numeric character references are useful when working with or documenting the underlying Unicode values.
Emoji Appearance
The appearance of an emoji can vary between operating systems, devices, applications, and fonts. The same Unicode character may have different artwork on different platforms even though its underlying code point remains the same.
Newer emoji may also display differently or fail to display as intended on systems that do not yet include support for them. For this reason, the exact artwork of a Unicode emoji should not be expected to look identical for every user.
Emoji Accessibility
Screen readers may announce emoji using their Unicode or accessibility names, so emoji should be used thoughtfully when they communicate important information.
Whenever an emoji conveys meaning, surrounding text should make that meaning understandable instead of requiring the user to interpret the emoji alone.
Less Clear
<p>⚠️</p>More Clear
<p>⚠️ Warning: This action cannot be undone.</p>Decorative emoji should also be used in moderation because a long series of announced emoji can make content difficult to follow with assistive technology.
Emoji Categories
Emoji are organized into categories that make large collections easier to browse. This tutorial includes pages covering the major emoji categories as well as separate pages explaining emoji components and modifiers.
- Emoji Components
- Emoji Modifiers
- Smileys & Emotion — 😀 😂 🥰 😎
- People & Body — 👋 👩 🧑💻 👍
- Animals & Nature — 🐶 🦋 🌳 🌻
- Food & Drink — 🍎 🍕 ☕ 🎂
- Travel & Places — 🚗 ✈️ 🏠 🗽
- Activities — ⚽ 🏀 🎮 🎨
- Objects — 💻 📱 💡 🔧
- Symbols — ❤️ ⚠️ ✅ ♻️
- Flags — 🇺🇸 🇨🇦 🇯🇵 🇬🇧
Each category page provides representative emoji examples and links to the Unicode Consortium for the complete current emoji charts.
HTML Emoji Example
The following example demonstrates several ways emoji can be used with ordinary HTML content. Edit the text, replace the emoji, or try entering a hexadecimal character reference to see the results.
Emoji Best Practices
- Use UTF-8 character encoding in HTML documents.
- Use emoji when they add useful meaning or visual context.
- Do not rely on emoji alone to communicate important information.
- Remember that emoji artwork can vary between platforms.
- Use direct emoji characters when they make the HTML easier to read.
- Use numeric character references when the Unicode value is useful or needs to be shown explicitly.
- Avoid excessive emoji that can make content harder to read or understand.
Summary
Emoji are Unicode characters and character sequences that can be used directly within HTML text. UTF-8 allows HTML documents to represent emoji along with characters from writing systems throughout Unicode.
Emoji can be entered directly or represented with numeric HTML character references. Their appearance can vary between platforms, and they should be used with meaningful text when accessibility or understanding depends on their meaning.