Selamat datang kembali di seri Belajar HTML! Setelah kita mendalami seluk-beluk form dan atributnya, kali ini kita akan membahas topik yang mungkin terlihat sederhana namun sangat penting: Simbol HTML atau yang secara teknis dikenal sebagai HTML Entities.
Pernahkah Anda mencoba menulis tag <h1> sebagai teks biasa di halaman web Anda, namun yang muncul malah sebuah judul besar? Atau bagaimana cara Anda mengetik simbol hak cipta (©), Euro (€), atau merek dagang (™) yang tidak ada di keyboard Anda? Jawabannya ada pada Simbol HTML.
Apa itu Simbol (Entity) HTML?
Simbol atau Entitas HTML adalah potongan teks khusus (kode) yang digunakan untuk menampilkan karakter-karakter tertentu di halaman web. Browser akan menerjemahkan kode ini menjadi simbol atau karakter yang sesuai saat halaman ditampilkan.
Penggunaan utamanya ada dua:
- Menampilkan Karakter Ter-reservasi (Reserved Characters): Beberapa karakter memiliki makna khusus bagi HTML. Contoh paling umum adalah tanda “kurang dari” (
<) dan “lebih dari” (>) yang digunakan untuk mendefinisikan tag. Jika kita ingin menampilkannya sebagai teks biasa, kita harus menggunakan kode entitasnya. - Menampilkan Karakter yang Tidak Ada di Keyboard: Ini mencakup ribuan simbol, mulai dari simbol mata uang, matematika, panah, hingga ikon-ikon sederhana.
Struktur Simbol HTML
Setiap entitas HTML memiliki dua format penulisan, dan keduanya selalu diawali dengan ampersand (&) dan diakhiri dengan titik koma (;).
- Nama Entitas (Entity Name): Format ini menggunakan nama yang mudah diingat (misalnya,
©untuk simbol copyright). Format ini lebih mudah dibaca manusia, namun tidak semua karakter memiliki nama entitas. Penulisannya case-sensitive (membedakan huruf besar dan kecil).- Struktur:
&namanetitas;
- Struktur:
- Nomor Entitas (Entity Number): Format ini menggunakan referensi nomor dari set karakter standar (Unicode). Format ini mungkin sulit dihafal, tetapi hampir semua karakter di dunia memiliki nomor entitas, membuatnya lebih universal.
- Struktur:
&#nomor;
- Struktur:
Secara umum, disarankan menggunakan Nama Entitas jika tersedia karena lebih mudah dipahami saat membaca kode.
Daftar Simbol HTML yang Paling Sering Digunakan
Berikut adalah tabel beberapa simbol HTML yang paling umum dan berguna dalam pengembangan web sehari-hari.
Catatan Khusus untuk
atau non-breaking space adalah entitas yang sangat berguna. Berbeda dengan spasi biasa yang bisa dipisahkan oleh browser jika berada di akhir baris, memastikan bahwa ada spasi di antara dua kata atau karakter dan browser tidak akan memisahkan keduanya ke baris yang berbeda.
Contoh penggunaan:
100 km(agar “100” dan “km” tidak terpisah baris)Rp 50.000(agar “Rp” dan “50.000” selalu menyatu)
Contoh Praktis dalam Kode
Mari kita lihat bagaimana simbol-simbol ini digunakan dalam sebuah halaman HTML sederhana.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Penggunaan Simbol HTML</title>
</head>
<body>
<h1>Menampilkan Kode HTML sebagai Teks</h1>
<p>
Untuk membuat paragraf di HTML, gunakan tag <p>.
</p>
<hr>
<h1>Contoh Penggunaan Simbol Umum</h1>
<p>
Harga produk ini adalah €50.
Pembelian minimal 2 buah × €50 = €100.
</p>
<p>
Jarak dari Malang ke Surabaya sekitar 100 km.
</p>
<hr>
<footer>
<p>
Hak Cipta © 2025 Perusahaan Keren™. All rights reserved.
</p>
</footer>
</body>
</html>
Hasil di Browser:
Menampilkan Kode HTML sebagai Teks
Untuk membuat paragraf di HTML, gunakan tag <p>.
Contoh Penggunaan Simbol Umum
Harga produk ini adalah €50. Pembelian minimal 2 buah × €50 = €100.
Jarak dari Malang ke Surabaya sekitar 100 km.
Hak Cipta © 2025 Perusahaan Keren™. All rights reserved.
Kesimpulan
Meskipun tampak sepele, memahami cara kerja Simbol (Entitas) HTML adalah keterampilan fundamental yang akan menghindarkan Anda dari banyak masalah saat menampilkan konten. Dengan ini, Anda memiliki kontrol penuh atas teks dan simbol yang muncul di halaman web Anda, memastikan konten ditampilkan persis seperti yang Anda inginkan.
Pada tutorial selanjutnya, kita akan masuk ke salah satu bagian paling menarik dari web: menyisipkan media seperti gambar, audio, dan video! Tetap semangat!
