adydetra_
29 Jul 2025

HTML Entities dan Escape Characters

Di bagian ini, kita akan bahas tentang HTML Entities dan Escape Characters. Mungkin sebelumnya kamu pernah coba menampilkan simbol seperti <, >, atau & langsung di halaman HTML, tapi malah hasilnya nggak sesuai harapan. Nah, disinilah peran HTML entities muncul.

Langsung kita mulai aja ya pembahasannya!


Apa itu HTML Entities?

HTML Entities adalah cara untuk menampilkan karakter atau simbol khusus di halaman web, terutama simbol yang punya arti khusus di HTML.

Misalnya simbol < dan > yang dipakai untuk tag HTML. Kalo langsung kamu ketik di HTML tanpa entity, browser bakal menganggap itu sebagai bagian dari tag.


Contoh Penggunaan HTML Entities

Coba kamu lihat contoh berikut:

<!-- Kalau kamu tulis langsung begini, akan dianggap sebagai tag -->
<p>Ini adalah tag paragraf: <p></p></p>

Kode di atas pasti nggak tampil di browser sesuai harapan. Supaya tampil bener, kamu bisa pakai HTML entities seperti ini:

<p>Ini adalah tag paragraf: &lt;p&gt;&lt;/p&gt;</p>

Nah, kode &lt; akan jadi < dan &gt; akan jadi > waktu ditampilkan di browser.


Daftar HTML Entities yang Sering Dipakai

Ini beberapa contoh HTML entities yang sering banget dipakai:

KarakterEntityHasil
<&lt;<
>&gt;>
&&amp;&
"&quot;"
'&apos;'
©&copy;©
®&reg;®

Kamu tinggal pakai kode entity-nya di HTML, maka browser bakal otomatis menampilkan simbolnya.


Escape Characters di HTML

Selain HTML entities, ada juga escape characters. Ini sebenernya konsep yang hampir sama aja, tapi biasanya dipakai waktu kamu mau nunjukin simbol tertentu di dalam kode JavaScript atau teks khusus.

Misalnya, kamu mau menampilkan backslash (\) di halaman:

<p>Untuk membuat garis miring seperti ini: \\ gunakan escape character.</p>

Di contoh atas, kita ketik dua kali backslash supaya yang muncul cuma satu backslash di browser.


Menampilkan Simbol Emoji dengan HTML Entities

Bahkan emoji pun bisa kamu tampilkan pake HTML entities lho! Contohnya kayak gini:

<p>Saya sedang senang &#128512;</p>

Kode &#128512; akan berubah jadi emoji 😊 di halaman kamu.

Untuk daftar emoji dan kode lengkapnya kamu bisa cek di Emojipedia.


Tips Praktis

  • Kalau bingung atau lupa kode entity tertentu, kamu bisa Googling dengan kata kunci "HTML entities for …".
  • Untuk simbol yang sering dipakai seperti tanda kutip atau & (ampersand), wajib banget diingat karena sering dipakai.

Kesimpulan

Jadi intinya, HTML entities dan escape characters ini penting banget buat kamu kuasai biar halaman web kamu bisa nampilin simbol khusus dengan benar. Sekarang kamu nggak perlu bingung lagi kalau mau nulis tag HTML atau simbol khusus langsung di halaman web kamu.

Kalau kamu masih bingung, coba aja langsung di code editor kamu dan lihat hasilnya di browser. Itu cara paling ampuh buat paham materi ini. 👍