Character Entity HTML untuk Menampilkan Simbol Khusus

Pernah mencoba menulis tanda < atau > langsung di dalam kode HTML, tetapi hasilnya malah dianggap sebagai tag? Nah, di sinilah Character Entity HTML menjadi penyelamat kecil yang sering baru terasa penting setelah kita mengalami error pertama.

Character Entity, yang dalam dokumentasi modern HTML lebih sering disebut character reference, memungkinkan kita menampilkan karakter tertentu menggunakan kode khusus. Cara ini sangat berguna untuk simbol yang memiliki fungsi khusus dalam sintaks HTML, seperti <, >, &, tanda kutip, hingga berbagai simbol Unicode.

Kalau kamu sedang belajar HTML, memahami bagian ini akan membuat banyak hal terasa lebih masuk akal. Di blog Adi Prayitno, kita akan membahas pengertian Character Entity HTML, cara menulisnya, jenis-jenisnya, contoh yang sering digunakan, sampai kesalahan yang cukup sering dilakukan pemula.

Character Entity HTML untuk Menampilkan Simbol Khusus

Apa Itu Character Entity HTML?

Character Entity HTML adalah istilah yang umum digunakan untuk menyebut referensi karakter, yaitu rangkaian karakter khusus yang digunakan untuk mewakili karakter lain ketika menulis HTML.

Sederhananya, kita memberikan "kode pengganti" kepada karakter tertentu agar browser tidak salah memahami maksudnya.

Contohnya, jika ingin menampilkan simbol < sebagai teks, kita bisa menulis:

<

Browser kemudian menampilkannya sebagai:

<

Jadi kode yang ditulis di HTML berbeda dengan karakter yang akhirnya terlihat oleh pengunjung.

Mengapa Character Entity Dibutuhkan?

HTML menggunakan beberapa karakter sebagai bagian dari sintaksnya sendiri. Tanda < dan > misalnya, digunakan untuk membentuk tag HTML, sedangkan & digunakan untuk memulai sebuah character reference.

Masalah muncul ketika kita justru ingin menampilkan karakter tersebut sebagai bagian dari tulisan.

Misalnya kamu ingin membuat tutorial HTML dan menulis:

<p>Gunakan tag <p> untuk membuat paragraf.</p>

Browser bisa menganggap <p> yang berada di dalam kalimat sebagai elemen HTML baru.

Solusinya:

<p>Gunakan tag &lt;p&gt; untuk membuat paragraf.</p>

Hasilnya:

Gunakan tag <p> untuk membuat paragraf.

Nah, ini alasan Character Entity sangat penting untuk blog tutorial HTML. Tanpa teknik ini, contoh kode yang seharusnya dibaca pembaca justru bisa diproses browser sebagai markup.

---

Bentuk Dasar Character Entity HTML

Character reference HTML memiliki pola yang cukup mudah dikenali.

Untuk named character reference, bentuknya:

&nama;

Contohnya:

&

akan menghasilkan:

&

Selain menggunakan nama, HTML juga mendukung referensi karakter berdasarkan Unicode code point. Ada dua bentuk numerik, yaitu desimal dan heksadesimal.

1. Named Character Reference

Menggunakan nama karakter:

©

Hasil:

©

2. Decimal Character Reference

Menggunakan angka desimal:

©

Hasilnya juga:

©

3. Hexadecimal Character Reference

Menggunakan kode heksadesimal:

©

Hasil:

©

Ketiganya dapat menghasilkan karakter yang sama, tetapi bentuk named reference biasanya lebih mudah dibaca manusia ketika nama referensinya sudah dikenal.

---

Character Entity HTML yang Paling Sering Digunakan

Kalau baru mulai belajar HTML, tidak perlu menghafal ratusan referensi karakter. Beberapa yang berikut ini sudah sangat berguna untuk kebutuhan sehari-hari.

Karakter	Character Entity	Fungsi
<	&lt;	Less than
>	&gt;	Greater than
&	&amp;	Ampersand
"	&quot;	Double quotation
'	&apos;	Apostrophe
	&nbsp;	Non-breaking space
©	&copy;	Copyright
®	&reg;	Registered
™	&trade;	Trademark
€	&euro;	Euro
£	&pound;	Pound
°	&deg;	Derajat
–	&ndash;	En dash
—	&mdash;	Em dash

Referensi seperti <, >, &, ", ', dan   termasuk contoh character references yang umum digunakan.

---

1. < untuk Simbol <

Tanda < sangat penting dalam HTML karena digunakan untuk membuka tag.

Jika ingin menampilkan simbol tersebut sebagai teks, gunakan:

<

Contoh:

<p>Simbol kurang dari adalah &lt;.</p>

Hasil:

Simbol kurang dari adalah <.

Ini sering digunakan ketika membuat artikel tutorial HTML, terutama saat menjelaskan struktur tag.

---

2. > untuk Simbol >

Kebalikannya, simbol > dapat ditulis menggunakan:

>

Contoh:

<p>Simbol lebih dari adalah &gt;.</p>

Hasil:

Simbol lebih dari adalah >.

Kalau sedang menampilkan contoh tag HTML, biasanya kita membutuhkan keduanya sekaligus.

<h1>Judul Artikel</h1>

Hasil:

<h1>Judul Artikel</h1>

Ini trik kecil yang sangat sering dipakai dalam artikel coding.

---

3. & untuk Simbol &

Karakter & memiliki fungsi khusus dalam character reference karena digunakan sebagai pembuka kode seperti ©.

Karena itu, jika ingin menampilkan tanda ampersand sebagai teks dalam konteks yang membutuhkan escaping, gunakan:

&

Contoh:

<p>HTML &amp; CSS</p>

Hasil:

HTML & CSS

Ini menjadi sangat penting ketika teks yang ditulis mengandung pola yang bisa dianggap sebagai character reference.

---

4. " untuk Tanda Kutip

Untuk tanda kutip ganda, tersedia:

"

Contoh:

<p>Dia berkata &quot;Belajar HTML itu menyenangkan.&quot;</p>

Hasil:

Dia berkata "Belajar HTML itu menyenangkan."

Namun jangan sampai berpikir semua tanda kutip dalam HTML harus selalu diubah menjadi ". Modern HTML menggunakan UTF-8 dan banyak karakter dapat ditulis langsung ketika tidak ada konflik dengan sintaks.

---

5. ' untuk Apostrophe

Tanda apostrophe atau kutip tunggal dapat ditulis menggunakan:

'

Contoh:

<p>Adi&apos;s Blog</p>

Hasil:

Adi's Blog

Referensi ini berguna ketika kita memang membutuhkan representasi karakter apostrophe dalam HTML.

---

6.   untuk Non-Breaking Space

  adalah singkatan dari non-breaking space.

Berbeda dengan spasi biasa, karakter ini membuat dua bagian teks tetap terhubung sehingga browser tidak memisahkannya pada titik tersebut.   termasuk salah satu character reference yang umum digunakan dalam HTML.

Contoh:

<p>Adi&nbsp;Prayitno</p>

Hasil visualnya akan terlihat seperti:

Adi Prayitno

Tapi hati-hati. Jangan menggunakan   berulang-ulang hanya untuk membuat jarak antar elemen.

Kalau tujuanmu mengatur layout atau jarak desain halaman, CSS adalah tempat yang lebih tepat.

---

7. © untuk Simbol Copyright

Simbol copyright dapat ditulis menggunakan:

©

Contoh:

<p>&copy; 2026 Adi Prayitno</p>

Hasil:

© 2026 Adi Prayitno

Referensi © merupakan named character reference untuk karakter copyright U+00A9.

Untuk footer blog atau informasi hak cipta, bentuk ini cukup praktis.

---

8. ® untuk Simbol Registered

Untuk simbol registered trademark:

®

Contoh:

<p>Nama Brand&reg;</p>

Hasil:

Nama Brand®

Kode ini mewakili karakter registered sign.

---

9. ™ untuk Trademark

Simbol trademark dapat ditulis dengan:

™

Contoh:

<p>Contoh Brand&trade;</p>

Hasil:

Contoh Brand™

Referensi ™ merupakan named character reference untuk simbol trademark.

---

10. € dan £ untuk Mata Uang

Character Entity HTML juga menyediakan referensi untuk sejumlah simbol mata uang.

Contoh euro:

€

Hasil:

€

Contoh pound:

£

Hasil:

£

Referensi untuk euro dan pound tersedia dalam daftar named character references HTML.

---

Character Entity dengan Kode Angka

Selain nama, karakter juga dapat ditulis menggunakan kode numerik.

Misalnya simbol copyright:

©

atau:

©

Keduanya menghasilkan:

©

Perbedaannya hanya pada sistem penulisan. © menggunakan nilai desimal, sedangkan © menggunakan nilai heksadesimal dari Unicode code point.

Contoh lain untuk simbol kurang dari:

<

atau:

<

Keduanya menghasilkan:

<

Menurut saya, bentuk numerik ini baru terasa berguna ketika kita berhadapan dengan karakter yang tidak mempunyai nama entity yang mudah diingat.

---

Apakah Semua Simbol Harus Ditulis sebagai Entity?

Tidak.

Ini salah satu hal yang sering disalahpahami pemula. Modern HTML menggunakan Unicode dan biasanya menggunakan encoding UTF-8, sehingga banyak karakter dapat langsung ditulis dalam dokumen HTML.

Misalnya:

<p>Selamat datang © 2026</p>

Tidak harus selalu ditulis:

<p>Selamat datang &copy; 2026</p>

Keduanya dapat menampilkan simbol copyright.

MDN juga menyarankan agar character references tidak digunakan secara berlebihan ketika karakter literal dapat ditulis langsung.

Jadi, jangan sampai semua simbol diubah menjadi kode hanya karena terlihat lebih "pro". HTML bukan lomba banyak-banyakan ampersand.

---

Kapan Character Entity Wajib atau Sangat Berguna?

Ada beberapa situasi ketika character reference benar-benar membantu.

Saat Menampilkan Contoh Tag HTML

Misalnya artikel ingin menampilkan:

<h1>Belajar HTML</h1>

Agar browser tidak memprosesnya sebagai tag, kita bisa menulis:

<h1>Belajar HTML</h1>

Saat Menampilkan Karakter yang Memiliki Arti Khusus

Contohnya:

<p>5 &lt; 10</p>

Hasil:

5 < 10

Saat Membutuhkan Karakter Tertentu

Misalnya simbol copyright:

<p>&copy; 2026</p>

Saat Membutuhkan Non-Breaking Space

<p>100&nbsp;MB</p>

Ini bisa berguna ketika dua bagian teks memang tidak ingin dipisahkan oleh browser pada pergantian baris.

---

Kesalahan Pemula Saat Menggunakan Character Entity

Ada beberapa kesalahan kecil yang cukup sering muncul ketika belajar HTML.

1. Lupa Tanda ;

Named character reference sebaiknya ditulis lengkap dengan titik koma.

Benar:

©

Jangan membiasakan menulis:

&copy

Spesifikasi HTML menetapkan named character references dengan titik koma sebagai bentuk yang benar, dan penggunaan tanpa titik koma dapat menimbulkan masalah parsing pada konteks tertentu.

2. Menulis < Secara Langsung Saat Ingin Menampilkan Kode

Jika ingin menampilkan:

<p>

sebagai teks, jangan langsung memasukkannya ke konten HTML biasa.

Gunakan:

<p>

Ini kesalahan klasik yang hampir semua orang pernah lakukan ketika pertama kali membuat artikel tutorial HTML.

3. Menggunakan   untuk Mengatur Layout

Kalau kamu menemukan kode seperti:

    

untuk membuat jarak, sebaiknya berhenti sebentar.

Untuk layout, gunakan CSS. Character reference bukan pengganti margin, padding, atau flexbox.

---

Character Entity HTML dan SEO

Character Entity HTML bukan teknik SEO untuk membuat artikel otomatis mendapatkan ranking lebih tinggi.

Fungsinya lebih mendasar, yaitu membantu HTML merepresentasikan karakter tertentu dengan benar. Dengan markup yang tepat, browser dapat memproses dokumen sesuai maksud penulis.

Untuk blog tutorial seperti yang sering dibuat di Adi Prayitno, manfaatnya justru terasa pada keterbacaan kode. Pembaca bisa melihat <h1>, <p>, <div>, dan tag lainnya tanpa browser menganggap contoh tersebut sebagai elemen HTML sungguhan.

Jadi jangan memasukkan entity secara berlebihan demi SEO. Gunakan saat memang dibutuhkan oleh struktur atau isi konten.

---

Ringkasan Character Entity HTML

Kalau ingin mengingat yang paling penting dulu, simpan daftar kecil ini:

&lt;     <!-- < -->
&gt;     <!-- > -->
&amp;    <!-- & -->
&quot;   <!-- " -->
&apos;   <!-- ' -->
&nbsp;   <!-- non-breaking space -->
&copy;   <!-- © -->
&reg;    <!-- ® -->
&trade;  <!-- ™ -->
&euro;   <!-- € -->
&pound;  <!-- £ -->
&deg;    <!-- ° -->

Untuk pemula, enam karakter pertama sudah menjadi bekal yang sangat berguna ketika mulai membuat artikel HTML dan contoh kode.

Kesimpulan

Character Entity HTML atau character reference adalah cara untuk merepresentasikan karakter tertentu dalam dokumen HTML menggunakan nama atau kode numerik. Yang paling penting untuk dipahami adalah <, >, &, ", ', dan  , terutama ketika menampilkan karakter yang mempunyai fungsi khusus dalam sintaks HTML.

Dari pengalaman belajar HTML, bagian ini memang terlihat kecil, tetapi justru sering menjadi penyelamat ketika kita mulai membuat tutorial atau menampilkan kode di dalam postingan Blogger. Jadi, jangan sekadar menghafal entity. Coba buka file HTML dan praktikkan beberapa contoh di atas sampai kamu melihat sendiri perbedaan antara kode yang ditulis dan karakter yang ditampilkan browser.

Kalau artikel Adi Prayitno ini membantu, coba tuliskan di komentar Character Entity mana yang paling sering kamu gunakan. Bagikan juga artikel ini kepada teman yang sedang belajar HTML supaya mereka tidak ikut tersandung masalah tanda < dan > yang satu ini.

Berbagi :