Home ยป HTML ยป Emoji di HTML: Simbol dan Contoh Codenya

Emoji di HTML: Simbol dan Contoh Codenya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

Apa itu Emoji?

Emoji adalah karakter dari rangkaian karakter UTF-8(Unicode): ๐Ÿ˜„ ๐Ÿ˜ ๐Ÿ’—

Emoji terlihat seperti gambar atau ikon tetapi sebenarnya tidak. Emoji adalah huruf (karakter) dari kumpulan karakter UTF-8 (Unicode). UTF-8 mencakup hampir semua karakter dan simbol di dunia.

Atribut rangkaian karakter HTML

Untuk menampilkan halaman HTML dengan benar, browser web harus mengetahui set karakter yang digunakan pada halaman.

Ditentukan dalam tag <meta> seperti di bawah ini:

<meta charset="UTF-8">

Jika tidak ditentukan, UTF-8 adalah karakter default yang disetel dalam HTML. Jadi, UTF-8(Unicode) harus di setel atau ditentukan oleh kita agar bisa menjadi karakter emoji jika tidak maka UTF-8 hanyakah karakter default

Karakter UTF-8

Banyak karakter UTF-8 tidak dapat diketik pada papan ketik 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>A B C Pertama</p> 
<p>A B C Kedua</p> 

</body>
</html>

Penjelasan Kode :

Elemen <meta charset="UTF-8"> mendefinisikan himpunan karakter.

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

Browser akan menampilkan karakter yang kita buat jika kita menggunakan nomor entitas dengan menggunakan &,# dan diakhiri dengan semicolon (;).

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 Satu</h1>

<p>๐Ÿ˜€</p>

</body>
</html>

Karena Emoji adalah karakter, jadi emoji bisa 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">
๐Ÿ˜€ ๐Ÿ˜„ ๐Ÿ˜ ๐Ÿ’—
</p>

</body>
</html>

Beberapa Simbol Emoji

EmojiKode
๐Ÿ—ป#128507;
๐Ÿ—ผ#128508;
๐Ÿ—ฝ#128509;
๐Ÿ—พ#128510;
๐Ÿ—ฟ#128511;
๐Ÿ˜€#128512;
๐Ÿ˜#128513;
๐Ÿ˜‚#128514;
๐Ÿ˜ƒ#128515;
๐Ÿ˜„#128516;
๐Ÿ˜…#128517;

You may also like