Dalam pengembangan web, sering kali kita perlu menampilkan simbol khusus, seperti tanda panah, tanda kutip, atau simbol mata uang. HTML menyediakan cara yang mudah untuk memasukkan simbol-simbol ini melalui Character Entities atau Unicode.
Berikut adalah cara-cara yang dapat kalian gunakan untuk menampilkan simbol dalam HTML.
Cara Membuat Symbol pada HTML
1. Menggunakan Character Entities
Character entities adalah kode khusus yang dimulai dengan & dan diakhiri dengan ;. Kode ini dapat kalian gunakan untuk menampilkan simbol di browser. Beberapa simbol yang umum digunakan adalah:
| Simbol | Character Entity | Deskripsi |
|---|---|---|
| < | < | Tanda lebih kecil |
| > | > | Tanda lebih besar |
| & | & | Tanda ampersand |
| © | © | Tanda copyright |
| ® | ® | Tanda terdaftar |
| € | € | Simbol Euro |
| ¥ | ¥ | Simbol Yen |
| § | § | Tanda paragraf |
Contoh Penggunaan:
<p>Symbol copyright: ©</p>
<p>Symbol Euro: €</p>2. Menggunakan Unicode
Unicode adalah standar internasional yang mendefinisikan setiap karakter yang dapat digunakan dalam komputer. Kalian dapat memasukkan simbol dengan kode Unicode menggunakan sintaks &#x<kode_unicode>;.
| Simbol | Unicode | Deskripsi |
|---|---|---|
| ★ | ★ | Bintang Penuh |
| ☂️ | ☂ | Payung |
| ♥️ | ♥ | Hati |
| ✔️ | ✔ | Tanda Centang |
| ✉️ | ✉ | Amplop |
Contoh Penggunaan:
<p>Bintang: ★</p>
<p>Hati: ♥</p>3. Menggunakan Decimal Entities
Selain hexadecimal (hex), kalian juga bisa menggunakan decimal entities. Ini sangat mirip dengan unicode, hanya saja ditulis dengan angka desimal.
| Simbol | Decimal Entity | Deskripsi |
|---|---|---|
| ♥️ | ♥ | Hati |
| ♣️ | ♣ | Klub pada kartu |
| ♦️ | ♦ | Wajik pada kartu |
| ♠️ | ♠ | Sekop pada kartu |
| ♪ | ♪ | Not Musik |
Contoh Penggunaan:
<p>Hati: ♥</p>
<p>Not Musik: ♪</p>4. Menggunakan Font Icons (Icon Web)
Selain simbol yang telah disebutkan, kalian juga bisa menggunakan font icons seperti Font Awesome atau Material Icons untuk menampilkan simbol yang lebih kompleks, seperti ikon media sosial, ikon navigasi, dan lainnya.
Contoh Penggunaan dengan Font Awesome:
<!DOCTYPE html>
<html lang="id">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<i class="fas fa-heart"></i> <!-- Ikon hati -->
<i class="fas fa-envelope"></i> <!-- Ikon amplop -->
</body>
</html>Tips Menggunakan Symbol di HTML
- Gunakan Character Entities untuk simbol dasar dan umum seperti
<,>, atau©. - Gunakan Unicode atau Decimal Entities jika simbol tidak tersedia sebagai character entity.
- Untuk ikon yang lebih visual atau berbasis gaya, gunakan font icons seperti Font Awesome.
Dengan berbagai metode di atas, kalian dapat dengan mudah menambahkan simbol ke dalam halaman HTML kalian untuk meningkatkan tampilan dan fungsionalitas.