Эмодзи в HTML

Что такое эмодзи?

Эмодзи выглядят как изображения, но это не так. Это буквы (символы) из набора символов UTF-8 (Unicode), охватывающего почти все символы и знаки в мире. У каждого эмодзи также есть номер сущности (entity), поэтому, например, эмодзи горы — это 🗻, а улыбающееся лицо — 😀.

Примеры эмодзи HTML

HTML поддерживает эмодзи из многих категорий, включая смайлики, руки, людей, офис, места, транспорт, животных, еду, растения, фрукты, спорт, землю и небо, погоду, одежду, аудио и видео, праздники, развлечения и символы.

Атрибут HTML charset

Чтобы правильно отобразить страницу, браузер должен знать используемый набор символов. Вы задаёте его в теге <meta>. Если вы его не указали, UTF-8 используется по умолчанию в HTML.

Мета-тег charset

Установка набора символов UTF-8.

<meta charset="UTF-8">

Символы UTF-8

Многие символы UTF-8 нельзя ввести с клавиатуры, но их всегда можно показать с помощью номеров сущностей. Например, A — это 65, B — 66, а C — 67. Начинайте номер сущности с &# и заканчивайте точкой с запятой, чтобы браузер знал, что вы показываете символ.

Пример

Буквы A, B и C, показанные напрямую и с помощью их номеров сущностей.

Страница с charset UTF-8, отображающая буквы A B C двумя способами: набранные напрямую и с помощью числовых кодов сущностей &#65; &#66; &#67;.

> Результат: полная HTML-страница

Prompt

Страница с charset UTF-8, отображающая буквы A B C двумя способами: набранные напрямую и с помощью числовых кодов сущностей A B C.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>Я отображу A B C</p>
<p>Я отображу &#65; &#66; &#67;</p>

</body>
</html>

Символы эмодзи

Эмодзи также являются символами из набора UTF-8, поэтому у каждого есть номер; например, улыбающееся лицо 😄 — это 128516. Поскольку это символы, эмодзи можно копировать, отображать и изменять размер так же, как любой другой текст.

Один эмодзи

Один эмодзи, показанный по его номеру сущности.

Страница с кодировкой UTF-8, показывающая заголовок «Мой Первый Эмодзи» и один смайлик с улыбающимся лицом, используя числовой код сущности &#128512;.

> Результат: полная HTML-страница

Prompt

Страница с кодировкой UTF-8, показывающая заголовок «Мой Первый Эмодзи» и один смайлик с улыбающимся лицом, используя числовой код сущности 😀.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>Мой Первый Эмодзи</h1>

<p>&#128512;</p>

</body>
</html>

Эмодзи с изменённым размером

Эмодзи, увеличенные с помощью CSS-размера шрифта.

Страница с charset UTF-8, показывающая заголовок "Sized Emojis" и ряд из четырёх эмодзи (числовые коды сущностей 128512, 128516, 128525, 128151), увеличенных до размера шрифта 48px.

> Результат: полная HTML-страница

Prompt

Страница с charset UTF-8, показывающая заголовок "Sized Emojis" и ряд из четырёх эмодзи (числовые коды сущностей 128512, 128516, 128525, 128151), увеличенных до размера шрифта 48px.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>Эмодзи с Заданным Размером</h1>

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

</body>
</html>