Langsung ke konten

HTML Entities: Cara Menampilkan Karakter Khusus di HTML

Pelajari cara menggunakan HTML Entities untuk menampilkan karakter khusus seperti <, >, &, dan spasi. Pahami entity deskriptif seperti &copy; dan &reg;.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah membahas multimedia, kita masuk ke topik yang lebih teknis: HTML Entities. Topik ini penting karena beberapa karakter tidak bisa ditulis langsung di kode HTML.

Apa itu HTML Entities?

HTML Entities adalah kode khusus untuk menampilkan karakter yang tidak bisa ditulis langsung di HTML. Entities menggunakan format &nama; atau &angka;.

Contoh:

  • < tidak bisa ditulis langsung karena dianggap sebagai tag pembuka
  • Spasi berlebihan diabaikan browser
  • Karakter khusus seperti hak cipta butuh entity

Karakter Khusus

Tanda Kurung Sudut

KarakterEntity NamaEntity AngkaKegunaan
<&lt;&#60;Kurang dari
>&gt;&#62;Lebih dari
<p>Kode HTML: &lt;p&gt;Hello&lt;/p&gt;</p>

Hasil: Kode HTML: Hello

Tanda Ampersand

KarakterEntity NamaEntity Angka
&&amp;&#38;
<p>A &amp; B</p>

Hasil: A & B

Tanda Kutip

KarakterEntity NamaEntity Angka
"&quot;&#34;
'&apos;&#39;
<p>Kata: &quot;Halo&quot;</p>

Hasil: Kata: “Halo”

Spasi

EntityKegunaan
&nbsp;Non-breaking space (spasi yang tidak putus)
<p>HTML&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;JavaScript</p>

&nbsp; berguna untuk:

  • Spasi yang tidak boleh putus (misalnya antara angka dan satuan)
  • Membuat spasi ekstra yang tidak diabaikan browser

Entity Deskriptif

Beberapa karakter umum punya nama entity yang mudah diingat:

Hak Cipta dan Merek

KarakterEntityKeterangan
©&copy;Hak cipta (Copyright)
®&reg;Merek terdaftar (Registered)
™&trade;Merek dagang (Trademark)
<p>&copy; 2026 Nama Website. All rights reserved.</p>
<p>Produk ini menggunakan teknologi XYZ&reg;.</p>
<p>NamaBrand&trade;</p>

Matematika

KarakterEntityKeterangan
×&times;Perkalian
÷&divide;Pembagian
±&plusmn;Plus-minus
≠&ne;Tidak sama dengan
≤&le;Kurang dari atau sama dengan
≥&ge;Lebih dari atau sama dengan
<p>5 &times; 3 = 15</p>
<p>10 &divide; 2 = 5</p>
<p>Hasilnya &plusmn; 0.5</p>
<p>x &ne; 0</p>

Arah

KarakterEntityKeterangan
←&larr;Panah kiri
→&rarr;Panah kanan
↑&uarr;Panah atas
↓&darr;Panah bawah
<p>Klik di sini &rarr; untuk melanjutkan.</p>

Spesial

KarakterEntityKeterangan
€&euro;Euro
£&pound;Pound sterling
¥&yen;Yen
°&deg;Derajat
µ&micro;Mikro
…&hellip;Elipsis (titik tiga)
–&ndash;En dash
—&mdash;Em dash
<p>Harga: &euro;50 atau &pound;45</p>
<p>Suhu: 36&deg;C</p>
<p>Tunggu sebentar&hellip;</p>

Entity untuk Karakter UTF-8

Kamu bisa menggunakan kode Unicode untuk karakter apapun:

<!-- Karakter dengan kode heksadesimal -->
<p>&#x2764; (hati)</p>
<p>&#x1F600; (emoji tersenyum)</p>

<!-- Karakter dengan kode desimal -->
<p>&#10084; (hati)</p>

Kapan Menggunakan HTML Entities?

1. Karakter yang Bentrok dengan HTML

<!-- Salah: browser menganggap <p> sebagai tag -->
<p>Jika a < b, maka a + b = c</p>

<!-- Benar: gunakan entity -->
<p>Jika a &lt; b, maka a + b = c</p>

2. Spasi Ekstra yang Diabaikan

<!-- Salah: spasi diabaikan -->
<p>Nama: Budi</p>

<!-- Benar: gunakan &nbsp; untuk spasi tetap -->
<p>Nama:&nbsp;&nbsp;&nbsp;Budi</p>

3. Karakter Khusus

<!-- Copyright -->
<p>&copy; 2026 Website Saya</p>

<!-- Trademark -->
<p>Produk XYZ&trade;</p>

4. Karakter yang Tidak Ada di Keyboard

<p>Suhu: 25&deg;C</p>
<p>Harga: &euro;100</p>

Daftar Entity Lengkap

Berikut beberapa entity yang sering digunakan:

KarakterEntityNama
<&lt;Less than
>&gt;Greater than
&&amp;Ampersand
"&quot;Quotation mark
'&apos;Apostrophe
&nbsp;Non-breaking space
©&copy;Copyright
®&reg;Registered
™&trade;Trademark
€&euro;Euro
£&pound;Pound
¥&yen;Yen
°&deg;Degree
×&times;Multiplication
÷&divide;Division
±&plusmn;Plus-minus
…&hellip;Horizontal ellipsis

Tips

  • Gunakan entity nama (misal &copy;) karena lebih mudah diingat
  • Gunakan entity angka hanya jika tidak ada nama yang sesuai
  • Jangan overuse entities. Gunakan hanya jika benar-benar diperlukan
  • Untuk karakter Unicode lengkap, referensi ke Unicode Chart

Ringkasan

  • HTML Entities untuk menampilkan karakter khusus di HTML
  • Format: &nama; atau &angka;
  • Karakter khusus: <, >, &, ", '
  • &nbsp; untuk spasi yang tidak putus
  • Entity deskriptif: &copy;, &reg;, &trade;, &euro;, &deg;
  • Gunakan entity untuk karakter yang bentrok dengan HTML

Langkah Selanjutnya

Kamu sudah memahami HTML Entities. Artikel selanjutnya membahas character encoding, cara kerja encoding dan mengapa UTF-8 penting.