Encoder / decoder HTML entity

HTML entity adalah urutan teks singkat yang mewakili sebuah karakter dalam kode sumber HTML. Entity digunakan ketika sebuah karakter akan ambigu atau tidak valid dalam HTML mentah — misalnya, `<` dan `>` membatasi tag HTML, sehingga karakter `<` literal dalam konten harus ditulis sebagai `&lt;` agar browser tidak menginterpretasikannya sebagai awal tag.

HTML entity hadir dalam dua bentuk. Entity bernama menggunakan nama yang mudah dibaca setelah `&` dan sebelum `;`, misalnya `&amp;` untuk ampersand, `&copy;` untuk simbol hak cipta, atau `&mdash;` untuk em-dash. Entity numerik menggunakan code point Unicode desimal atau heksadesimal — `&#169;` dan `&#xA9;` keduanya menghasilkan simbol hak cipta ©.

Lima karakter HTML yang dicadangkan yang wajib diketahui setiap developer:

• `&amp;` – ampersand `&`
• `&lt;` – tanda lebih kecil `<`
• `&gt;` – tanda lebih besar `>`
• `&quot;` – tanda kutip ganda `"`
• `&#39;` – apostrof / tanda kutip tunggal `'`

Selain kelima karakter tersebut, HTML mendefinisikan entity bernama untuk ratusan karakter lainnya: huruf beraksen (`&eacute;` = e dengan aksen akut), spasi tak terputus (`&nbsp;`), tanda baca tipografi (`&mdash;` = em-dash, `&ldquo;` dan `&rdquo;` = tanda kutip tipografi), simbol mata uang (`&euro;` = tanda euro), simbol matematika, dan huruf Yunani.

Encode HTML entity setiap kali Anda menyisipkan teks biasa ke dalam dokumen HTML dan teks tersebut mungkin mengandung karakter yang dicadangkan oleh HTML. Situasi yang paling umum:

• Menempelkan konten yang dibuat pengguna atau teks blog ke dalam CMS atau template yang menyimpan HTML mentah.
• Menyematkan contoh kode dalam posting blog atau halaman dokumentasi — cuplikan seperti `<strong>tebal</strong>` harus di-encode sebagai `&lt;strong&gt;tebal&lt;/strong&gt;` agar browser merendernya sebagai teks yang terlihat.
• Membangun payload JSON yang disematkan dalam tag HTML `<script>` di mana `<`, `>`, dan `&` dapat merusak struktur HTML di sekitarnya.
• Menyimpan nilai atribut yang mungkin mengandung tanda kutip ganda agar tidak merusak pembatas `"..."` di sekitarnya.
• Meng-encode karakter khusus untuk template email HTML.

Gunakan mode basic ketika Anda hanya perlu meng-escape lima karakter yang dicadangkan. Gunakan mode extended untuk kompatibilitas HTML maksimal atau untuk sistem lama yang hanya mendukung ASCII.

Decode HTML entity ketika Anda menerima teks yang sudah di-escape dan perlu membaca, memproses, atau menampilkan karakter aslinya. Dalam istilah pencarian, ini sering disebut HTML decode, HTML unescape, atau mengonversi teks HTML-encoded ke teks biasa. Situasi umum:

• Respons API yang kolom stringnya mengandung teks HTML-escaped — misalnya `Tom &amp; Jerry` padahal yang diharapkan adalah `Tom & Jerry`. Dalam kasus ini Anda perlu mengonversi HTML entity ke teks.
• Memperbaiki konten CMS yang ter-encode dua kali sehingga menghasilkan string seperti `&amp;lt;` alih-alih `&lt;` atau `<`.
• Membaca entri feed RSS atau Atom yang konten teksnya biasanya di-encode dalam HTML.
• Memeriksa baris log yang mengandung parameter kueri atau pesan error yang ter-escape HTML.
• Menyalin teks yang terlihat dari file sumber HTML di mana konten disimpan sebagai entity.

Alat ini men-decode entity bernama (`&amp;`, `&copy;`, `&mdash;`, `&nbsp;`, dan ratusan lainnya) serta entity numerik dalam notasi desimal (`&#169;`) dan heksadesimal (`&#xA9;`).

Encoder ini menawarkan dua tingkat detail encoding.

Mode basic hanya meng-encode lima karakter HTML yang dicadangkan: `&` menjadi `&amp;`, `<` menjadi `&lt;`, `>` menjadi `&gt;`, `"` menjadi `&quot;`, `'` menjadi `&#39;`. Semua karakter lainnya — huruf beraksen seperti `é` dan `ü`, simbol seperti `©` dan `—`, emoji seperti 😀 — dilewatkan tanpa perubahan. Gunakan mode basic ketika lingkungan target mendukung Unicode secara native.

Mode extended meng-encode kelima karakter yang dicadangkan yang sama dan selain itu mengonversi setiap karakter non-ASCII menjadi entity numerik desimal. Misalnya, `é` menjadi `&#233;`, `©` menjadi `&#169;`, `—` menjadi `&#8212;`, dan 😀 menjadi `&#128512;`. Gunakan mode extended saat membutuhkan output ASCII murni atau untuk sistem lama.

Developer terkadang mencari tugas yang sama dengan istilah htmlDecode, htmlEncode, HTML escape, HTML unescape, encode HTML, atau decode HTML. Istilahnya berbeda-beda, tetapi tujuannya sama: konversi yang aman antara karakter yang dapat dibaca dan representasi HTML entity-nya.

Contoh konversi bolak-balik dalam mode basic:

• Input: `Café & © 😀`
• Di-encode (basic): `Café &amp; © 😀`
• Di-decode: `Café & © 😀`

Contoh konversi bolak-balik dalam mode extended:

• Input: `Café & © 😀`
• Di-encode (extended): `Caf&#233; &amp; &#169; &#128512;`
• Di-decode: `Café & © 😀`

Encoding HTML entity dan URL encoding adalah dua mekanisme yang sama sekali berbeda dengan tujuan dan output yang berbeda — meskipun keduanya mengubah karakter khusus ke representasi alternatif.

Encoding HTML entity diperuntukkan bagi dokumen HTML. Mekanisme ini mengganti karakter yang memiliki arti khusus dalam markup HTML dengan urutan entity yang diperlakukan oleh parser HTML sebagai konten teks. Hasilnya tetap berupa teks yang dapat dibaca — `&amp;` ditampilkan sebagai `&` di browser.

URL encoding (percent encoding) diperuntukkan bagi URL. Mekanisme ini mengganti karakter yang tidak aman atau dicadangkan dalam URL dengan urutan byte yang dikodekan dalam persen. Spasi menjadi `%20`, ampersand menjadi `%26`, tanda lebih kecil menjadi `%3C`.

Perbandingan karakter yang sama di kedua sistem:

• `&` – HTML: `&amp;`, URL: `%26`
• `<` – HTML: `&lt;`, URL: `%3C`
• `>` – HTML: `&gt;`, URL: `%3E`
• `"` – HTML: `&quot;`, URL: `%22`
• `'` – HTML: `&#39;`, URL: `%27`

Jika Anda menempelkan teks yang sudah di-encode HTML ke dalam URL encoder, encoder tersebut akan meng-encode karakter entity itu sendiri (`&`, `;`, `#`), yang hampir tidak pernah diinginkan. Gunakan halaman ini untuk decode HTML entity, encode HTML entity, dan mengonversi teks HTML-encoded ke teks yang dapat dibaca.

Encoding HTML entity (alat ini) mengonversi karakter ke padanan HTML entity-nya dan membalik proses tersebut. Alat ini tidak menambahkan, menghapus, atau merestrukturisasi elemen HTML apa pun. Struktur dokumen tetap dipertahankan; hanya representasi karakter khusus yang berubah.

Pembersihan HTML adalah operasi berbeda yang menghapus atau menulis ulang markup HTML — menghapus tag yang tidak diinginkan, menormalkan atribut, atau membersihkan konten yang berpotensi berbahaya. Fungsi pembersih mungkin mengubah `<b onclick="...">tebal</b>` menjadi `<b>tebal</b>` atau sekadar `tebal`.

Alat ini tidak membersihkan HTML. Jika Anda menempelkan HTML mentah ke encoder, encoder akan meng-encode tanda kurung sudut dan karakter yang dicadangkan lainnya dalam markup, mengubah `<p>Halo</p>` menjadi `&lt;p&gt;Halo&lt;/p&gt;`. Alat ini tidak memeriksa, menghapus, atau merestrukturisasi elemen apa pun.

Alat ini juga bukan pembersih teks. Alat ini tidak menghapus spasi berlebih, tidak menghilangkan aksen, dan tidak menormalkan jeda baris. Satu-satunya tugasnya adalah meng-encode dan men-decode HTML entity.