Belajar Koding HTML Bagian 17: Memanggil Emojis

Dalam HTML, emoji adalah representasi bergambar dari suatu karakter atau simbol, yang biasanya digunakan untuk menyampaikan emosi, ide, atau konsep dalam bentuk visual. Emoji didukung oleh peramban web modern dan dapat disertakan dalam dokumen HTML untuk meningkatkan pengalaman visual dan menambahkan elemen ekspresif ke konten berbasis teks. Emoji direpresentasikan menggunakan karakter Unicode, yang menetapkan kode unik untuk setiap karakter, termasuk emoji. Karakter Unicode ini dapat disisipkan ke dalam dokumen HTML menggunakan nilai Unicode yang sesuai.

Misalnya, untuk menampilkan emoji wajah tersenyum 😀 dalam HTML, Anda dapat menggunakan nilai Unicode  atau nilai desimal  . Emoji akan ditampilkan oleh browser sebagai representasi visual yang sesuai, yang memungkinkan pemirsa melihat dan mengartikan emosi atau konsep yang dimaksud.

Untuk menampilkan emoji dalam HTML, Anda dapat menggunakan beberapa metode, seperti menyisipkan karakter emoji langsung, menggunakan kode entitas desimal atau hexadesimal, serta memanfaatkan pustaka ikon seperti Font Awesome. Berikut adalah penjelasan lengkap mengenai cara-cara tersebut beserta daftar kode emoji yang dapat Anda gunakan.

1. Menyisipkan Karakter Emoji Langsung

Cara termudah untuk menampilkan emoji adalah dengan menyalin dan menempelkan karakter emoji langsung ke dalam kode HTML Anda. Pastikan dokumen HTML Anda menggunakan karakter set UTF-8 dengan menambahkan tag berikut di dalam elemen <head>:

Contoh penggunaan:lms.muhidin.web.id

Ini adalah emoji hati merah: ❤️

2. Menggunakan Kode Entitas Desimal dan Hexadesimal

Setiap emoji memiliki kode Unicode yang dapat direpresentasikan dalam format desimal atau hexadesimal. Anda dapat menggunakan kode-kode ini dalam HTML untuk menampilkan emoji.

Kode Entitas Desimal: Menggunakan format &#kode_desimal;.
Kode Entitas Hexadesimal: Menggunakan format &#xkode_hexadesimal;.

Contoh penggunaan:lms.muhidin.web.id

Emoji wajah tersenyum (desimal): 😀

Emoji wajah tersenyum (hexadesimal): 😀

Untuk daftar lengkap kode emoji dalam format desimal dan hexadesimal, Anda dapat merujuk ke F

3. Menggunakan Pustaka Ikon seperti Font Awesome

Font Awesome adalah pustaka ikon populer yang menyediakan berbagai ikon, termasuk beberapa yang menyerupai emoji. Untuk menggunakan Font Awesome dalam proyek HTML Anda, ikuti langkah-langkah berikut:

Sertakan CSS Font Awesome: Tambahkan link berikut di dalam elemen <head>:

<link

rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Gunakan Kelas Ikon: Tambahkan elemen dengan kelas yang sesuai untuk menampilkan ikon.

Contoh penggunaan:

Ikon hati menggunakan Font Awesome:

Untuk daftar lengkap kode ikon Font Awesome, Anda dapat merujuk ke Daftar Kode Icon Font Awesome Lengkap - Slide Seo Blog.Slide Seo Blog

4. Daftar Beberapa Emoji Populer dengan Kode HTML-nya

Berikut adalah beberapa emoji populer beserta kode entitas desimal dan hexadesimal yang dapat Anda gunakan dalam HTML:

Emoji	Nama	Kode Desimal	Kode Hexadesimal
😀	Wajah Tersenyum	😀	😀
😂	Wajah Tertawa dengan Air Mata	😂	😂
❤️	Hati Merah	❤	❤
👍	Jempol ke Atas	👍	👍
⭐	Bintang	⭐	⭐
🏆	Piala	🏆	🏆
🚀	Roket	🚀	🚀
🎉	Konfeti	🎉	🎉
📞	Telepon	📞	📞
🐱	Wajah Kucing	🐱	🐱