Использование эмодзи (смайликов) в HTML
Меню
Справочник

Использование эмодзи в HTML

Эмодзи в HTML

Эмодзи (смайлики) — это символы из набора символов UTF-8: 🙂 🙃 ✋ ✈


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

Смайлики выглядят как изображения или иконки, но это не так.

Это буквы (символы) из набора символов UTF-8 (Unicode).

UTF-8 охватывает почти все знаки и символы в мире.

Атрибут HTML - кодировки

Для правильного отображения HTML-страницы веб-браузер должен знать набор символов, используемый на странице.

Это указано в теге <meta>:

<meta charset="UTF-8">
Если не указано иное, UTF-8 является набором символов по умолчанию в HTML.

Символы UTF-8

Многие символы UTF-8 нельзя набрать на клавиатуре, но их всегда можно отобразить с помощью чисел (называемых числами сущностей):

А это - &#1040;
Б это - &#1041;
В это - &#1042;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>Здесь отображено А Б В</p>
<p>Здесь отображено &#1040; &#1041; &#1042;</p>

</body>
</html>

Результат:

Здесь отображено А Б В

Здесь отображено А Б В

Объяснение примера

Элемент <meta charset="UTF-8"> определяет набор символов.

Символы А, Б и В отображаются под номерами 1040, 1041 и 1042.

Чтобы браузер понял, что вы отображаете символ, вы должны начать номер объекта с &# и закончить его ; (точка с запятой).


Персонажи Эмодзи

Смайлики также являются символами из алфавита UTF-8:

🙂 это - &#128578;

🙃 это - &#128579;

✋ это - &#9995;

✈   это - &#9992;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>Мой первый эмодзи</h1>

<p>&#128512;</p>

</body>
</html>

Результат:

Мой первый эмодзи

😀

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

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

<p style="font-size:50px">
&#128578; &#128579; &#9995; &#9992;
</p>

</body>
</html>

Результат:

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

🙂 🙃 ✋ ✈


Некоторые символы эмодзи в UTF-8

Эмодзи Значение
&#9995;
🐝 &#128029;
🐞 &#128030;
👻 &#128123;
🕷 &#128375;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;
😆 &#128518;
😇 &#128519;
😈 &#128520;
😉 &#128521;
😊 &#128522;
🤝 &#129309;
🤟 &#129311;
🤠 &#129312;
🥐 &#129360;
🦅 &#129413;
🦆 &#129414;
🦉 &#129417;

☛ Кодирование HTML (наборы символов)

Символы HTML ☚

 

Поделиться ссылкой