Entitas dan Simbol HTML: Menampilkan Karakter Spesial dengan Aman

Cepat atau lambat kamu pasti ingin menaruh tanda lebih-kecil, simbol hak cipta, atau panah melengkung ke dalam halaman web — lalu sadar hasilnya tidak sesuai harapan. Browser malah menelan karakternya, menampilkan hal yang salah, atau malah merusak markup-mu. Itu bukan bug. Itu HTML yang sedang melindungi dirinya sendiri, dan solusinya adalah fitur kecil, tua, tapi benar-benar berguna bernama entitas HTML.

Di artikel ini kita bahas apa itu entitas, kenapa segelintir karakter tidak bisa diketik mentah ke HTML, dan cara menampilkan simbol, huruf beraksen, serta spasi spesial dengan benar. Tidak ada yang sulit kok — intinya cuma tahu karakter mana yang “dipesan” oleh HTML dan harus ditulis pakai apa sebagai gantinya.

Entitas HTML itu apa

Entitas HTML adalah kode pendek yang menggantikan sebuah karakter. Daripada mengetik karakternya langsung, kamu menulis urutan kecil yang diawali tanda ampersand (&) dan diakhiri titik koma (;). Browser membaca urutan itu lalu menampilkan karakter aslinya sebagai gantinya.

Contoh paling terkenal justru si ampersand itu sendiri:

<p>Tom &amp; Jerry</p>

Nah, & itulah entitasnya. Browser tidak mencetak huruf a-m-p — yang dicetak cuma satu karakter &. Jadi di halaman muncul:

Tom & Jerry

Setiap entitas selalu mengikuti salah satu dari dua bentuk:

Entitas bernama, seperti &, ©, atau   — gampang dibaca dan diingat.
Entitas bernomor (disebut juga referensi karakter numerik), seperti © atau © — ini menunjuk karakternya lewat nomor Unicode-nya, baik dalam desimal (©) maupun heksadesimal (&#x...;).

Baik © maupun © menghasilkan simbol yang persis sama: ©. Entitas bernama lebih ramah dibaca; yang bernomor bisa dipakai untuk karakter apa pun, bahkan yang tidak punya nama.

Titik koma itu bukan pelengkap

Sebuah entitas wajib diakhiri titik koma. & berhasil; tapi &amp (tanpa ;) tidak bisa diandalkan dan sering muncul sebagai teks apa adanya atau bertingkah aneh. Anggap & dan ; itu sepasang yang tidak bisa dipisah — setiap entitas dibuka dengan yang satu dan ditutup dengan yang lain.

Kenapa ada karakter yang tidak bisa diketik langsung

Begini inti masalahnya. HTML memakai beberapa karakter sebagai bagian dari tata bahasanya sendiri. Browser butuh karakter-karakter itu untuk menentukan di mana sebuah tag dimulai dan berakhir. Kalau kamu mengetik salah satunya sebagai teks biasa, browser jadi bingung: apakah maksudmu itu isi konten atau markup?

Sebenarnya karakter yang dipesan ini cuma segelintir:

Karakter	Tugasnya di HTML	Entitas yang dipakai
`<`	Memulai sebuah tag	`<`
`>`	Mengakhiri sebuah tag	`>`
`&`	Memulai sebuah entitas	`&`
`"`	Membungkus nilai atribut	`"`
`'`	Membungkus nilai atribut	`'` (atau `'`)

Dua yang paling sering kamu temui adalah < dan >. Bayangkan kamu sedang menulis tutorial dan ingin menampilkan teks “pakai tag <strong>.” Kalau kamu ketik mentah:

<p>Pakai tag <strong> untuk penekanan.</p>

…browser tidak akan menampilkan “pakai tag <strong>.” Dia mengira kamu benar-benar membuka elemen strong, jadi semua teks setelahnya berubah jadi tebal dan tulisan <strong>-nya malah lenyap. Supaya karakternya tampil apa adanya, kamu harus meng-escape-nya:

<p>Pakai tag &lt;strong&gt; untuk penekanan.</p>

Sekarang halaman dengan benar menampilkan: Pakai tag <strong> untuk penekanan.

Si ampersand punya masalah yang sama. Karena & mengawali setiap entitas, sebuah & mentah di tengah teksmu jadi ambigu — browser bisa saja mencoba membaca teks setelahnya sebagai awal sebuah entitas. Menulis & menghapus semua keraguan itu.

Aturan escape berbeda di dalam atribut

Di dalam nilai atribut, karakter yang berbahaya adalah tanda kutip yang kamu pakai untuk membungkusnya. Kalau nilainya mengandung kutip ganda dan kamu membungkus nilai itu juga dengan kutip ganda, escape kutip di dalamnya dengan " — kalau tidak, browser mengira nilainya sudah berakhir lebih awal. Hal yang sama berlaku untuk &: sebuah URL yang mengandung &, misalnya query string, sebaiknya menulisnya sebagai & di dalam href. Contohnya: <a href="cari?q=kucing&urut=baru">.

Menampilkan simbol dan karakter spesial

Entitas bukan cuma untuk meng-escape karakter yang dipesan. Mereka juga cara klasik untuk menampilkan simbol yang tidak ada di keyboard-mu — tanda mata uang, tanda hukum, panah, operator matematika, dan banyak lagi.

Beberapa yang umum:

<p>&copy; 2026 ACY Partner Indonesia</p>
<p>Harga: 50&euro; &mdash; penawaran menarik.</p>
<p>Dinilai 4.5 &starf; dari 5</p>
<p>Gulir ke bawah &darr; untuk lebih banyak</p>
<p>5 &times; 3 = 15</p>

Itu tampil seperti ini:

© → © (hak cipta)
€ → € (euro)
— → — (em dash, yang panjang)
× → × (tanda kali — bukan huruf x)
↓ → ↓ (panah ke bawah)

Ada ratusan entitas bernama. Kamu tidak perlu menghafal semuanya; kamu cukup tahu bahwa mereka ada, jadi bisa mencari yang kamu butuhkan saat perlu simbol tertentu. Beberapa yang benar-benar bakal sering kamu pakai: © (©), ® (®), ™ (™), … (…), — (—), dan ° (° untuk derajat).

Huruf beraksen dan huruf non-Inggris

Huruf dengan tanda aksen juga punya entitas bernama — berguna kalau kamu memakai editor yang susah mengetik huruf-huruf itu, atau kalau kamu ingin menulisnya secara eksplisit:

<p>caf&eacute;, na&iuml;ve, jalape&ntilde;o</p>

Itu menghasilkan: café, naïve, jalapeño.

Tapi dalam praktiknya, kamu biasanya tidak butuh entitas untuk huruf beraksen sama sekali — lihat catatan di bawah ini.

Dengan UTF-8, sering kali karakternya bisa langsung diketik

Halaman modern disimpan sebagai UTF-8 (kamu mengaturnya lewat <meta charset="UTF-8"> di bagian head — sesuatu yang sudah kamu temui saat belajar struktur sebuah dokumen HTML). Dengan UTF-8 sudah terpasang, kamu bisa mengetik café, €, bahkan emoji langsung ke dalam HTML dan tetap tampil mulus. Jadi entitas untuk aksen dan simbol jadi opsional. Yang tidak bisa kamu lewati adalah karakter yang dipesan — <, >, dan & — karena yang ini selalu disalahbaca sebagai markup, apa pun encoding-mu.

Spasi tak-putus dan entitas tak terlihat lainnya

Ada beberapa entitas yang tidak mewakili simbol yang terlihat — fungsinya mengatur spasi. Yang paling berguna adalah spasi tak-putus, ditulis  .

Spasi biasa membiarkan browser memindahkan teks ke baris berikutnya di mana saja sesukanya. Spasi tak-putus adalah spasi yang menolak untuk diputus. Pakai ini untuk merekatkan dua kata supaya tidak pernah terpisah ke baris berbeda:

<p>Hubungi kami di 0800&nbsp;123&nbsp;456 hari ini.</p>
<p>Lihat gambar&nbsp;3 untuk detail.</p>

Di sini nomor telepon dan “gambar 3” akan selalu berada di baris yang sama. Sentuhan kecil sih, tapi cukup untuk mencegah patahan baris yang janggal di tengah sesuatu yang seharusnya dibaca sebagai satu kesatuan.

Jangan pakai untuk mengakali tata letak

Ada kebiasaan lama yang jelek: mengetik     untuk mendorong teks ke samping atau membuat indentasi. Jangan. Soal spasi dan tata letak itu tugasnya CSS — pakai margin, padding, dan text-indent saja. Deretan spasi tak-putus itu rapuh, tidak ramah untuk pembaca layar (screen reader), dan bikin pusing saat dirawat. Simpan   untuk tujuan aslinya: menjaga kata-kata tertentu tetap menyatu.

Dua entitas yang berkaitan juga layak kamu kenal: – (–, en dash, dipakai untuk rentang seperti “halaman 10–20”) dan — (—, em dash, dipakai untuk menyisipkan frasa — seperti ini). Keduanya benar secara tipografi dan terlihat jauh lebih rapi ketimbang tanda hubung polos.

Bernama versus bernomor: pilih yang mana

Kalau sebuah entitas punya nama, utamakan namanya — © jauh lebih jelas daripada © bagi siapa pun yang membaca kode sumbermu nanti. Pakai bentuk bernomor cuma di dua situasi:

Karakternya tidak punya entitas bernama (kebanyakan simbol memang begitu). Cari nomor Unicode-nya lalu tulis &#NNNN; atau &#xHHHH;.
Kamu ingin benar-benar eksplisit soal sebuah karakter yang tidak biasa.

Contohnya, panah tebal ke kanan (➜) tidak punya nama yang ramah, jadi kamu tulis lewat nomornya:

<p>Langkah berikutnya &#10148; daftar</p>

Baik desimal (➤) maupun heksadesimal (➨) menunjuk ke karakter yang sama — pilih mana yang lebih enak kamu baca.

Kapan kamu benar-benar butuh entitas — panduan singkat

Gampang sekali kepikiran berlebihan soal ini, jadi ini versi singkat kapan entitas benar-benar penting:

Selalu escape <, >, dan & kalau kamu ingin karakternya muncul sebagai teks apa adanya di kontenmu. Yang ini tidak bisa ditawar — versi mentahnya merusak markup-mu.
Di dalam nilai atribut, escape karakter kutip yang membungkus nilainya, dan escape & (sering muncul di URL).
Untuk simbol dan aksen, entitas itu pilihan yang aman, tapi dengan UTF-8 kamu biasanya bisa mengetik karakternya langsung — jadi pakai mana yang lebih jelas untuk timmu.
Pakai   untuk menjaga kata-kata tetap menyatu, dan – / — untuk dash yang benar — tapi jangan pernah untuk mengakali spasi atau tata letak.

Kalau kamu menampilkan potongan kode di sebuah halaman (seperti cuplikan-cuplikan di artikel ini), setiap <, >, dan & di dalam kode itu harus di-escape, atau ditulis oleh tool yang meng-escape-nya untukmu. Itulah alasan paling umum di dunia nyata kenapa developer berurusan dengan entitas.

Penutup

Entitas HTML memang kelihatan seperti sandi saat pertama kali kamu lihat, tapi konsepnya sederhana: mereka adalah kode pengganti untuk karakter yang tidak bisa — atau tidak boleh — kamu ketik langsung.

Sebuah entitas adalah kode yang diawali & dan diakhiri ;, yang ditampilkan browser sebagai satu karakter.
Segelintir karakter yang dipesan — <, >, &, dan tanda kutip — wajib di-escape, karena HTML memakainya dalam tata bahasanya sendiri.
Entitas juga menampilkan simbol (©, €, ×, panah) dan huruf beraksen, walaupun dengan UTF-8 kamu sering bisa langsung mengetiknya.
Spasi tak-putus ( ) menjaga kata-kata tetap menyatu; pakai seperlunya, dan jangan pernah untuk mengakali tata letak.

Kuasai tiga karakter yang dipesan tadi, dan kamu sudah menutup sembilan puluh persen kasus yang bakal kamu temui. Sisanya tinggal cari cepat sebentar. Lain kali kamu butuh sebuah simbol, kamu sudah tahu persis harus pakai apa — sekaligus paham kenapa selama ini blok kode di halamanmu adem ayem saja.