Menggunakan Emoji dalam HTML


Emoji adalah karakter dari rangkaian karakter UTF-8: 😄 😍 💗


Apa itu Emoji?

Emoji terlihat seperti gambar, atau ikon, tetapi sebenarnya tidak.

Mereka adalah huruf (karakter) dari kumpulan karakter UTF-8 (Unicode).

UTF-8 mencakup hampir semua karakter dan simbol di dunia.


Atribut charset HTML

Untuk menampilkan halaman HTML dengan benar, browser web harus mengetahui character set yang digunakan di halaman.

Ini ditentukan dalam tag <meta>:

<meta charset="UTF-8">

Jika tidak ditentukan, UTF-8 adalah karakter default yang disetel dalam HTML.


Karakter UTF-8

Banyak karakter UTF-8 tidak dapat diketik di keyboard, tetapi selalu dapat ditampilkan menggunakan angka (disebut nomor entitas):

A adalah 65

B adalah 66

C adalah 67


Contoh

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

<p>Saya akan menampilkan A B C</p>
<p>Saya akan menampilkan &#65; &#66; &#67;</p>

</body>
</html>

Penjelasan Contoh

Elemen <meta charset="UTF-8"> mendefinisikan character set.

Karakter A, B, dan C ditampilkan dengan angka 65, 66, dan 67.

Agar browser memahami bahwa Anda menampilkan karakter, Anda harus memulai nomor entitas dengan & # dan mengakhirinya dengan; (titik koma).


Karakter Emoji

Emoji juga merupakan karakter dari alfabet UTF-8:

😄 adalah 128516

😍 adalah 128525

💗 adalah 128151


Contoh

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

<h1>Emoji Pertama Saya</h1>

<p>&#128512;</p>

</body>
</html>

Karena Emoji adalah karakter, mereka dapat disalin, ditampilkan, dan diberi ukuran seperti karakter lain di HTML.


Contoh

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

<h1>Ukuran Emoji</h1>

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

</body>
</html>

Sumber referensi: w3schools

Komentar