Використання емодзі в HTML
Емодзі (емоджи, смайли) - це символи із набору символів UTF-8: 😄 😍 💗
Що таке емодзі?
Емодзі (смайли) виглядають як зображення або значки, але насправді це не так.
Це букви (символи) із набору символів UTF-8 (Unicode).
UTF-8 охоплює майже всі значки та символи в світі.
HTML атрибут charset
Щоб правильно відобразити HTML-сторінку, веб-браузер має знати набір символів, що використовується на веб-сторінці.
Це вказано в тегі <meta>:
<meta charset="UTF-8">
Якщо не вказано, UTF-8 є набором символів за замовчуванням в HTML.
Набір символів UTF-8
Багато символів UTF-8 не можна ввести з клавіатури, але вони завжди можуть відображатися за допомогою чисел (що називаються номерами сутностей):
- A - це 65
- B - це 66
- C - це 67
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Я буду відображати A B C</p>
<p>Я буду відображати A B C</p>
</body>
</html>
Спробуйте самі »
Пояснення прикладу
Елемент <meta charset="UTF-8"> визначає набір символів.
Символи A, B та C відображаються числами 65, 66 і 67.
Щоб браузер зрозумів, що ви показуєте символ, ви повинні починати номер об’єкта з &# і закінчувати його з ; (крапка з комою).
Емодзі символи
Емодзі - це також символи алфавіту UTF-8:
- 😄 - це 128516
- 😍 - це 128525
- 💗 - це 128151
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Мій перший емодзі</h1>
<p>😀</p>
</body>
</html>
Спробуйте самі »
Оскільки емодзі є символами, їх можна копіювати, відображати і змінювати розмір, як і будь-який інший символ в HTML.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Розмір емодзі</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Спробуйте самі »
Деякі символи емодзі в UTF-8
| Емодзі | Значення |
|---|---|
| 🗻 | 🗻 |
| 🗼 | 🗼 |
| 🗽 | 🗽 |
| 🗾 | 🗾 |
| 🗿 | 🗿 |
| 😀 | 😀 |
| 😁 | 😁 |
| 😂 | 😂 |
| 😃 | 😃 |
| 😄 | 😄 |
| 😅 | 😅 |
Повний список емодзі можна знайти в HTML Емодзі довіднику на нашому сайті W3Schools українською.
