Using Emojis in HTML: Three Approaches
There are three ways to include emojis in an HTML document: pasting the literal UTF-8UTF-8
Kiểu mã hóa Unicode có chiều rộng thay đổi, dùng từ 1 đến 4 byte cho mỗi ký tự, thống trị trên web (98%+ website sử dụng). character, using HTML numeric character references (entities), or inserting them via CSS. Each approach has trade-offs in readability, file size, and compatibility. This guide covers all three methods plus accessibility and rendering best practices.
Step 1: Set Your Document to UTF-8
Before doing anything else, ensure your HTML document declares UTF-8 encoding. Without this, emojis may render as garbled text or question marks.
Add this tag inside the <head> element:
<meta charset="UTF-8">
A complete minimal HTML5 document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My EmojiEmoji
Từ tiếng Nhật (絵文字) có nghĩa là 'ký tự hình ảnh' — các ký hiệu đồ họa nhỏ dùng trong giao tiếp kỹ thuật số để diễn đạt ý tưởng, cảm xúc và sự vật. Page</title>
</head>
<body>
<p>Hello 🌍</p>
</body>
</html>
Also make sure your server sends Content-Type: text/html; charset=utf-8 in HTTP response headers and that your text editor saves files as UTF-8 (not Latin-1 or Windows-1252).
Method 1: Literal UTF-8 Characters (Recommended)
The simplest and most readable approach is to paste the emoji character directly into your HTML source code.
<p>We love pizza 🍕 and sushi 🍣</p>
<h2>Today's weather: ☀️ Sunny</h2>
<button>Submit ✅</button>
As long as your file is saved as UTF-8 and your <meta charset="UTF-8"> tag is present, this works perfectly in every modern browser. Emojis are stored as multi-byte UTF-8 sequences — the browser reads them correctly and renders the glyph using the system's emoji fontEmoji Font
Tệp font kỹ thuật số chứa các thiết kế glyph emoji màu, sử dụng các công nghệ như COLR, CBDT, SVG hoặc sbix để hiển thị..
Advantages: Readable source, no encoding required, compact file size.
Disadvantages: Emojis can look like characters in some code editors; some older tools may mangle non-ASCII bytes.
Method 2: HTML Numeric Character References (Entities)
If you cannot safely store emoji characters in your source file, use HTML numeric character references. These reference the UnicodeUnicode
Tiêu chuẩn mã hóa ký tự phổ quát gán một số duy nhất cho mỗi ký tự trong tất cả hệ thống chữ viết và bộ ký hiệu, bao gồm cả emoji. code point in decimal or hexadecimal notation.
Decimal Format
<p>Fire: 🔥</p>
Hexadecimal Format (Recommended)
<p>Fire: 🔥</p>
The hex format (&#x...;) is more commonly used because Unicode code points are almost always documented in hex. Here are common examples:
| Emoji | Code Point | HTML Entity |
|---|---|---|
| 😀 | U+1F600 | 😀 |
| 🔥 | U+1F525 | 🔥 |
| ❤️ | U+2764 U+FE0F | ❤️ |
| 👍 | U+1F44D | 👍 |
| ✅ | U+2705 | ✅ |
| 🎉 | U+1F389 | 🎉 |
| 🌍 | U+1F30D | 🌍 |
| 💬 | U+1F4AC | 💬 |
Multi-Codepoint Emojis
Some emojis consist of multiple Unicode code points joined together. The ❤️ emoji is actually two code points: U+2764 (heart) and U+FE0F (variation selector-16 that forces emoji rendering).
ZWJ sequences (like 👩💻 woman technologist) use a Zero Width JoinerZero Width Joiner (ZWJ)
Ký tự Unicode vô hình (U+200D) dùng để ghép nhiều emoji thành một emoji tổng hợp, chẳng hạn kết hợp người và vật thể thành emoji nghề nghiệp. (U+200D) between components:
<!-- Woman Technologist: 👩 + ZWJ + 💻 -->
<span>👩‍💻</span>
Method 3: Emoji via CSS content Property
You can insert emojis in CSS using the content property on pseudo-elements. This is useful for decorative emojis that don't need to be in the DOM.
.success::before {
content: "✅ ";
}
.warning::before {
content: "⚠️ ";
}
.featured::after {
content: " ⭐";
}
Or using Unicode escape syntax in CSS:
.fire-label::before {
content: "\1F525 "; /* 🔥 */
font-family: "Noto Color EmojiColor Emoji
Emoji đầy màu sắc được hiển thị bằng hình ảnh bitmap hoặc đồ họa vector màu, trái ngược với cách hiển thị đơn sắc kiểu văn bản.", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
Important: CSS-inserted emojis are not accessible to screen readers by default. Use this method only for purely decorative emojis. For meaningful content, always use HTML with proper aria-label attributes.
Controlling Emoji Rendering with Variation Selectors
Unicode defines two variation selectors that control whether a character renders as text or emoji:
- U+FE0E (VS-15): Forces text/monochrome rendering ☎︎
- U+FE0F (VS-16): Forces emoji/color rendering ☎️
<!-- Text presentationText Presentation
Cách hiển thị một ký tự dưới dạng ký hiệu văn bản đơn sắc, hoặc theo mặc định hoặc khi áp dụng Variation Selector-15. (monochrome) -->
<span>☎︎</span>
<!-- Emoji presentationEmoji Presentation
Cách hiển thị mặc định của một ký tự dưới dạng glyph emoji có màu, hoặc vốn có hoặc được kích hoạt bởi Variation Selector-16. (color) -->
<span>☎️</span>
This matters for characters that have both a text and emoji form, such as ☎ (telephone), ✉ (envelope), ✂ (scissors), and many others.
Styling Emojis with CSS
Emojis respect standard CSS sizing properties:
.large-emoji {
font-size: 2rem;
}
.emoji-baseline {
vertical-align: middle;
line-height: 1;
}
/* Scale without blurring (emojis are vector/font-based) */
.hero-emoji {
font-size: 5rem;
}
For controlling emoji font across browsers, set a font stack that prioritizes system emoji fonts:
.emoji-text {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
"Segoe UI Symbol", "Android Emoji", sans-serif;
}
Accessibility: Making Emojis Meaningful
Screen readers read emojis aloud using their Unicode name — 🔥 is read as "fire" and ❤️ is read as "red heart." This works fine for simple cases, but causes problems when emojis are used decoratively (read unnecessarily) or when their meaning depends on context.
Hiding Decorative Emojis
<!-- Screen reader will skip this emoji -->
<span aria-hidden="true">🎉</span> Congratulations!
Labeling Meaningful Emojis
<!-- Screen reader reads "thumbs up" -->
<span role="img" aria-label="thumbs up">👍</span>
<!-- Screen reader reads "warning: this action cannot be undone" -->
<span role="img" aria-label="warning">⚠️</span> This action cannot be undone.
Emoji-Only Content
If an emoji is the entire content of a button or link, always provide an accessible label:
<button aria-label="Add to favorites">⭐</button>
<a href="/fire-sale" aria-label="View fire sale">🔥</a>
Emojis in Page Titles and Meta Tags
Emojis work in <title> tags and appear in browser tabs and search results in most modern browsers and search engines:
<title>🍕 Best Pizza Recipes | FoodSite</title>
<meta name="description" content="🔥 Hot new recipes updated weekly.">
<meta property="og:title" content="🍕 Best Pizza Recipes">
Google Search renders emojis in meta descriptions in many cases. However, use sparingly — excessive emojis can look spammy to search engines.
Quick Reference
| Task | Code |
|---|---|
| Declare UTF-8 | <meta charset="UTF-8"> |
| Literal emoji | 🔥 (paste directly) |
| Hex entity | 🔥 |
| CSS content | content: "\1F525" |
| Hide from screen reader | aria-hidden="true" |
| Label for screen reader | role="img" aria-label="fire" |
| Force emoji rendering | Append ️ |
Explore More on EmojiFYI
- Find the Unicode code point for any emoji with the Sequence Analyzer
- Browse and copy emojis with the Emoji Keyboard
- Learn how ZWJ sequences work in the Glossary
- Search for any emoji by name or keyword at EmojiFYI Search