Entity: Menulis Karakter Spesial

Masalahnya Karakter Spesial

Coba tulis ini di HTML:

<p>Tag paragraf ditulis <p> seperti ini.</p>

Browser bingung: <p> yang kedua dianggap tag sungguhan, bukan teks. Hasilnya berantakan. Solusinya: HTML entity, kode khusus untuk menampilkan karakter yang bentrok dengan sintaks.

Entity Paling Penting

Tiga ini wajib hafal di luar kepala:

<p>Tag paragraf ditulis &lt;p&gt; seperti ini.</p>
<p>AT&amp;T adalah perusahaan telekomunikasi.</p>
<p>Dia bilang &quot;halo&quot; lalu pergi.</p>

• <: tanda kurang dari (<)
• >: tanda lebih dari (>)
• &: ampersand (&)

Tanpa &, tulisan AT&T bisa bikin browser mengira &T adalah awal entity dan merendernya aneh.

Tiga Cara Menulis Entity

Setiap karakter spesial bisa ditulis tiga cara:

<p>&copy; 2026 Situsku</p>      <!-- named: nama -->
<p>&#169; 2026 Situsku</p>      <!-- decimal: kode desimal -->
<p>&#xA9; 2026 Situsku</p>      <!-- hexadecimal: kode heksa -->

Ketiganya menampilkan © yang sama. Named entity paling gampang diingat, jadi pakai itu kalau ada.

Entity yang Sering Dipakai

<p>&copy; Hak cipta dilindungi</p>
<p>Harga: Rp50&thinsp;000</p>
<p>Spasi tak terputus: 10&nbsp;km</p>
<p>Panah: &larr; &rarr; &uarr; &darr;</p>
<p>Kutipan: &ldquo;Halo&rdquo;</p>

• ©: ©
•  : spasi yang tidak boleh dipisah baris (non-breaking space). Berguna untuk "10 km" supaya angka dan satuan tidak terpisah baris.
• “ ”: tanda kutip tipografi yang rapi (" "), lebih bagus dari " biasa.

Kapan Entity Tidak Dibutuhkan

Dengan charset="UTF-8" (yang sudah kamu pasang di setiap dokumen), kamu bisa langsung menulis ©, é, atau emoji tanpa entity:

<meta charset="UTF-8">
<p>© 2026 Situsku, café favoritku ☕</p>

Ini valid dan tampil benar. Entity cuma wajib untuk tiga karakter sintaks: <, >, &. Sisanya opsional, pakai entity kalau lebih nyaman dibaca di kode.

Catatan teknis: Entity selalu diawali & dan diakhiri ;. Lupa titik koma adalah bug klasik: &copy tanpa titik koma kadang jalan, kadang tidak, tergantung konteks. Selalu tulis lengkap ©.

Contoh: Menampilkan Kode HTML

Kasus paling umum: tutorial (seperti yang kamu baca ini) yang menampilkan contoh kode HTML sebagai teks:

<p>Contoh: &lt;img src="foto.jpg" alt="Foto"&gt;</p>

Tanpa entity, browser akan mencoba merender <img> sebagai gambar sungguhan alih-alih menampilkannya sebagai teks. Setiap `< contoh kode di halaman tutorial memakai trik ini.

Daftar Cepat

Kecil tapi fundamental: tanpa entity, kamu tidak bisa menulis tutorial HTML di dalam HTML.