Эмодзи в HTML
Эмодзи стали стандартом современного веба. По данным Adobe Future of Creativity (2023), 92% пользователей интернета используют эмодзи в общении ежедневно. На сайтах эмодзи появляются в кнопках («📥 Скачать»), статусах («✅ Выполнено»), уведомлениях («⚠️ Внимание»), маркетинговых текстах.
Три способа вставить эмодзи в HTML:
1. Прямой Unicode (рекомендуется)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- ВАЖНО! --> </head> <body> <p>Привет мир! 👋😀🎉</p> <h1>📥 Скачать</h1> </body> </html>
Самый простой способ: копируете эмодзи откуда-то и вставляете в HTML. Требует UTF-8 charset (стандарт HTML5). Преимущества: короче в исходнике, читается, отлично для современного HTML5.
2. Numeric character reference
<!-- Decimal --> <p>Smile: 😀</p> <!-- 😀 --> <p>Heart: ❤</p> <!-- ❤ --> <!-- Hex (заглавная X) --> <p>Smile: 😀</p> <!-- 😀 --> <p>Heart: ❤</p> <!-- ❤ -->
Используется когда: (1) Файл не UTF-8 (legacy systems). (2) Email-шаблоны где encoding неизвестен. (3) Когда не хотите копировать эмодзи в исходник (для читаемости).
3. Через img (Twemoji)
<!-- Гарантирует одинаковый вид во всех браузерах --> <img src="https://twemoji.maxcdn.com/v/latest/svg/1f600.svg" alt="😀" class="emoji" width="20" height="20" /> <!-- Автоматическая замена через twemoji.js --> <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script> <script>twemoji.parse(document.body);</script>
Плюсы: одинаковый рендеринг везде (Mac, Windows, Linux). Минусы: external request, медленнее, зависимость от CDN.
Популярные коды
Unicode 16.0 содержит 3782 эмодзи. Каждое имеет код точки (например, U+1F600 для 😀), официальное название, и определенный визуал. Платформы (Apple, Google, Microsoft) рендерят их по-своему, но семантика одна.— Unicode Consortium — Emoji 16.0, 2024
Эмодзи в JavaScript
Длина строки — подвох
// JavaScript строки — UTF-16
"a".length // 1
"😀".length // 2 (suprogate pair)
"👨👩👧".length // 8 (zero-width joiner sequence)
// Правильный подсчёт через iterator
[..."😀"].length // 1
[..."👨👩👧"].length // 1
// Через Intl.Segmenter (современный API)
const seg = new Intl.Segmenter('ru', { granularity: 'grapheme' });
[...seg.segment("😀a❤️")].length // 3Unicode escape
// Старый способ — surrogate pair (для эмодзи > U+FFFF)
"\uD83D\uDE00" // 😀
// Современный — code point (ES2015+)
"\u{1F600}" // 😀
"\u{2764}" // ❤
"\u{1F44D}" // 👍
// String.fromCodePoint
String.fromCodePoint(0x1F600) // 😀
String.fromCodePoint(128512) // 😀
// codePointAt — обратное преобразование
"😀".codePointAt(0).toString(16) // "1f600"Регулярки и эмодзи
// Простой regex для эмодзи (не идеальный)
const emojiRegex = /[\u{1F600}-\u{1F64F}]/gu;
"Hello 😀 world!".match(emojiRegex)
// ["😀"]
// Через Unicode property escapes (ES2018+)
const emojiRegex2 = /\p{Emoji}/gu;
"Привет 👋 мир 🌍".match(emojiRegex2)
// ["👋", "🌍"]
// Удалить все эмодзи из строки
"Привет 👋 мир!".replace(/\p{Emoji}/gu, "")
// "Привет мир!"Практические сценарии
1. Email-маркетинг
- Subject с эмодзи — open rate +10-15% (по Litmus). Не больше 1-2 эмодзи в subject.
- Дублирующий текст — на случай если email-клиент не показывает.
- Корпоративные Outlook 2010 могут не показать — для B2B используйте осторожно.
2. UI/UX в продуктах
- Кнопки с иконкой — «📥 Скачать», «✏️ Редактировать», «🗑️ Удалить».
- Статусы — ✅ ❌ ⚠️ 🟢 🟡 🔴.
- Empty states — «🎉 Поздравляем, у вас нет активных задач».
- Уведомления — 🔔 для нотификации, 💬 для комментария, ❤️ для лайка.
3. Документация
- Markdown notes — > ⚠️ Внимание, > 💡 Совет, > ❌ Ошибка.
- Compatibility matrix — ✅ ⚠️ ❌ для статуса поддержки.
- Changelog — 🎉 Added, 🐛 Fixed, ⚠️ Deprecated, 💥 Breaking.
4. Что НЕ делать
- Эмодзи как единственный CTA. Всегда дублируйте текстом — для accessibility (screen readers).
- Слишком много эмодзи. >5 на страницу = выглядит непрофессионально.
- Эмодзи в form labels. «👤 Имя» — лучше просто «Имя».
- Эмодзи в product URL. Плохо для SEO, плохо для share в мессенджерах.
- Эмодзи как замена иконок. Иконки контролируются (цвет, размер). Эмодзи зависят от платформы.
Accessibility (a11y)
Screen readers (NVDA, JAWS, VoiceOver) читают эмодзи по их Unicode-имени. «😀» произносится как «smiling face». Поэтому:
- Дублируйте текстом. «🎉 Поздравляем!» — screen reader прочитает «party popper congratulations». Без emoji он прочитает только текст. Так понятнее.
- Aria-hidden для декоративных.
<span aria-hidden="true">🎉</span> Скидка 50%— эмодзи не читается, текст — да. - aria-label вместо текста.
<button aria-label="Удалить">🗑️</button>— иконка-only кнопка с подписью для screen reader. - Не злоупотребляйте. Длинная строка эмодзи в тексте раздражает screen reader пользователей.
ИСТОЧНИКИ
- Unicode Emoji Specification. Unicode Consortium. unicode.org/emoji. 2024.
- Twemoji — Open Source Emoji. Twitter / X. twemoji.twitter.com. 2024.
- MDN — Emoji. Mozilla. developer.mozilla.org/en-US/docs/Glossary/Emoji. 2024.
- Emojipedia — Emoji codes and meanings. Emojipedia. emojipedia.org. 2024.
