Coba kamu nulis tutorial HTML di blog — kamu pengen kasih contoh kode <p>halo</p>. Tapi kalau kamu ketik literal <p> di artikel, browser bakal kira kamu lagi bikin paragraf beneran, bukan nampilin teks <p>. Solusinya: HTML entities — kode rahasia buat karakter spesial. < jadi <, > jadi >, & jadi &. Kayak escape sequence yang bilang ke browser "ini teks saja, jangan diparse".

💡 Garda terdepan lawan XSS. Entity bukan cuma soal nampilin karakter — dia fondasi keamanan web. Tiap input user (nama, comment, post) yang di-render mentah ke HTML = celah XSS (Cross-Site Scripting). Hacker tinggal nulis <script>curi_cookie()</script> di kolom comment, browser eksekusi. Encode jadi <script> = aman, browser nampilin sebagai teks. Framework modern (React, Vue) auto-encode by default — tapi dangerouslySetInnerHTML / v-html bypass-nya.

Kapan Perlu, Kapan Tidak

Dengan <meta charset="UTF-8"> (yang sudah kamu pelajari di Meta Tags), sebagian besar karakter — termasuk huruf beraksen, emoji, dan simbol mata uang — bisa ditulis langsung tanpa entity. Contoh: ©, →, €, ° boleh langsung diketik.

HTML entities masih wajib dipakai di 3 situasi:

• Karakter yang punya arti khusus di HTML: <, >, &, dan kadang " di dalam atribut.
• Spasi yang harus tetap rapat (  mencegah kata pecah ke baris baru).
• Saat menampilkan contoh kode HTML di halaman web (agar browser tidak ikut menafsirkannya sebagai tag).

Format HTML entity: &nama; atau &#nomor;

Entities yang sering digunakan:

• < → < (less than)
• > → > (greater than)
• & → & (ampersand)
• " → " (kutip ganda)
• ' → ' (kutip tunggal)
•   → spasi yang tidak bisa dipisah (non-breaking space)
• © → © (copyright)
• → → → (panah kanan)

Contoh Penggunaan Entity

<p>Tag paragraf ditulis dengan &lt;p&gt;</p>
<p>Harga: Rp 50.000 &amp; gratis ongkir</p>
<p>&copy; 2024 Website Saya</p>

🎭 Analogi sehari-hari

HTML entity = kode rahasia surat untuk karakter yang punya arti spesial. Daripada langsung tulis < (yang dikira tag), tulis < — browser baca "less than", render < di layar tanpa nyangka tag.

⚠️ Jebakan yang sering ditemui

• & standalone harus & — bahkan di URL atribut! <a href="?a=1&b=2"> invalid, harus &b=2.
• Modern UTF-8 bisa langsung tulis ©, →, € — entities cuma wajib untuk <, >, &, dan " di atribut.
• Entity di <style>/<script> TIDAK berlaku — di sana karakter literal. if (x < 5) di JS = SyntaxError.
• Numeric entity © vs named © — sama hasilnya, named lebih readable.
•   untuk SPASI VISUAL = anti-pattern. Pakai CSS margin/padding.   cuma untuk cegah pecah baris di nama panjang.
• Smart quotes '/' terkadang merusak HTML attributes — selalu pakai ' di source.

TL;DR: HTML entities = kode buat karakter spesial yang punya arti di HTML (biar gak diparse). Wajib: < (<), > (>), & (&), " (" di atribut). Modern UTF-8 udah support langsung ketik ©, →, €, ° (gak butuh entity).   cegah pecah baris (BUKAN buat spasi visual — pakai CSS). Garda terdepan lawan XSS: encode user input sebelum render mentah ke HTML. Entity TIDAK berlaku di <style>/<script>.