HTML Entities dan Karakter Khusus: Cara Menampilkan Simbol, Tanda Kutip, dan Emoji
Daftar Isi
Ketika menulis teks biasa di HTML, sebagian besar karakter dapat dimasukkan langsung: huruf, angka, tanda baca, bahkan banyak simbol dan emoji. Namun beberapa karakter memiliki arti khusus bagi parser HTML. Karakter <, misalnya, digunakan untuk memulai sintaks tag, sedangkan & digunakan untuk memulai character reference. Karena itu, teks yang sebenarnya ingin ditampilkan kepada pengguna kadang perlu ditulis dengan representasi khusus agar tidak ditafsirkan sebagai bagian dari markup. Representasi tersebut lazim disebut HTML entity, meskipun istilah spesifikasi yang lebih tepat untuk bentuk seperti <, <, dan < adalah character reference. Tutorial ini membahas kapan reference diperlukan, perbedaan named character reference dan numeric character reference, serta kapan karakter Unicode justru lebih baik ditulis secara langsung. Fokusnya bukan menghafal ratusan nama entity, melainkan memahami aturan yang membuat teks HTML aman secara sintaksis dan mudah dirawat.
Praktik akan menggunakan satu file index.html yang dapat dibuka langsung dengan browser modern dan tidak memerlukan library, package manager, atau server. Dokumen contoh menyatakan encoding UTF-8 melalui <meta charset="utf-8">, sehingga huruf Indonesia, simbol internasional, dan emoji Unicode dapat disimpan secara langsung selama editor juga menyimpan file sebagai UTF-8. Anda akan mencoba simbol yang wajib diperhatikan dalam teks HTML, tanda kutip pada teks dan atribut, referensi numerik desimal serta heksadesimal, dan emoji. Di akhir, Anda juga akan melihat perbedaan penting antara source HTML dengan hasil yang dirender. Perbedaan ini penting: source < menghasilkan karakter < pada halaman, bukan tulisan literal <. Dengan memahami lapisan parsing tersebut, Anda dapat menghindari kesalahan seperti tag yang tidak sengaja terbentuk, ampersand yang ambigu, atau entity yang justru muncul sebagai teks karena di-escape terlalu banyak.
Landasan Sains dan Prinsip Kerja Metode
HTML diproses sebagai markup, sehingga karakter tidak selalu diperlakukan sebagai sekadar bentuk visual. Dalam konteks data teks normal, tanda kurang-dari mempunyai fungsi sintaksis penting karena dapat memulai markup. Jika tujuan Anda benar-benar menampilkan karakter kurang-dari sebagai data, bentuk yang jelas adalah named character reference < atau numeric character reference yang setara. Ampersand juga berperan dalam sintaks character reference; untuk ampersand literal, & merupakan pilihan yang tidak ambigu. Tanda lebih-dari umumnya dapat muncul langsung dalam teks biasa, walaupun > tersedia dan berguna ketika konsistensi atau konteks source membuatnya lebih jelas. Character reference diproses parser dan digantikan oleh karakter yang dirujuk pada representasi dokumen. Jadi entity bukanlah font, gambar, maupun mekanisme CSS. Browser tetap berakhir dengan karakter Unicode tertentu yang kemudian dirender menggunakan font dan sistem teks yang tersedia.
Ada dua keluarga penulisan yang penting. Named character reference memakai nama yang didefinisikan HTML, misalnya & untuk ampersand, < untuk kurang-dari, > untuk lebih-dari, " untuk tanda kutip ganda, dan untuk non-breaking space. Numeric character reference menggunakan Unicode code point sebagai angka desimal, misalnya ©, atau heksadesimal dengan x, misalnya ©; keduanya merujuk pada ©. Untuk karakter modern yang mudah diketik dan disimpan, penulisan langsung UTF-8 biasanya paling terbaca. Numeric reference berguna ketika Anda sengaja perlu menyatakan code point tertentu. Named reference berguna untuk karakter sintaksis yang umum karena maksudnya mudah dikenali manusia. Tidak semua simbol mempunyai nama entity yang perlu atau layak dihafalkan, sedangkan numeric character reference dapat menunjuk code point Unicode yang valid.
Konteks menentukan kebutuhan escaping. Dalam text content elemen, tanda kutip biasa tidak harus diubah menjadi entity: tulisan "Halo" dapat muncul langsung. Dalam nilai atribut yang dibatasi tanda kutip ganda, karakter kutip ganda yang merupakan bagian dari nilai perlu direpresentasikan sehingga tidak menutup atribut; " cocok untuk kasus itu. Sebaliknya, atribut yang dibatasi tanda kutip tunggal dapat memuat kutip ganda secara langsung, tetapi kutip tunggal di dalam nilainya memerlukan penanganan yang sesuai. Hal lain yang sering tertukar adalah escaping HTML dan encoding URL: keduanya memiliki tujuan berbeda. & digunakan untuk merepresentasikan ampersand pada markup HTML, sedangkan percent-encoding URL bekerja pada komponen URL. Prinsip praktisnya adalah menentukan konteks lebih dahulu, lalu escape hanya karakter yang perlu. Terlalu banyak escaping dapat menghasilkan teks literal yang tidak diinginkan, sementara terlalu sedikit dapat mengubah cara source diparse.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Tabel berikut merangkum sepuluh bentuk yang paling berguna untuk latihan. Kolom spesifikasi menunjukkan penulisan source atau aturan yang relevan, sedangkan fungsi menjelaskan hasil semantiknya. Named reference HTML bersifat case-sensitive, sehingga gunakan ejaan baku seperti yang ditampilkan. Untuk praktik baru, akhiri named character reference dengan titik koma. Numeric reference juga sebaiknya selalu menggunakan titik koma agar batas reference jelas. Jangan memilih entity hanya karena suatu karakter terlihat “khusus”; bila dokumen UTF-8 dapat menyimpan karakter tersebut secara langsung dan karakter itu tidak mengganggu sintaks konteksnya, penulisan langsung sering lebih mudah dibaca.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
| Ampersand | & → & | Menampilkan ampersand literal tanpa membuatnya menjadi awal character reference. |
| Tanda kurang-dari | < → < | Menampilkan karakter kurang-dari sebagai teks, bukan awal markup. |
| Tanda lebih-dari | > → > | Representasi bernama untuk karakter lebih-dari. |
| Kutip ganda | " → " | Berguna ketika kutip ganda perlu menjadi bagian nilai atribut yang memakai delimiter kutip ganda. |
| Kutip tunggal/apostrof | ' → ' | Merepresentasikan apostrof; didukung dalam HTML modern. |
| Non-breaking space | → U+00A0 | Membuat spasi yang tidak menjadi titik pemutusan baris normal. |
| Hak cipta | © → © | Named reference untuk simbol copyright. |
| Reference desimal | © → © | Merujuk Unicode code point menggunakan bilangan desimal. |
| Reference heksadesimal | © → © | Merujuk code point menggunakan bilangan heksadesimal. |
| Emoji langsung | UTF-8, misalnya 😀 (U+1F600) | Menyimpan karakter Unicode langsung tanpa memerlukan named entity. |
< dirender sebagai karakter kurang-dari, sedangkan source yang merepresentasikan ampersand dari reference itu secara literal akan membuat tulisan entity terlihat kepada pengguna. Untuk file latihan ini, simpan index.html sebagai UTF-8 dan pertahankan <meta charset="utf-8">. Character reference juga bukan mekanisme sanitasi lengkap untuk data tidak tepercaya; memasukkan data pengguna dengan aman membutuhkan escaping atau API yang sesuai dengan konteks tempat data tersebut dimasukkan.Panduan Langkah Kerja Bertahap
Siapkan Dokumen UTF-8 yang Dapat Diuji
Buat file bernama index.html pada folder latihan menggunakan editor teks atau editor kode yang dapat menyimpan UTF-8. Kita menggunakan dokumen mandiri supaya hasil parsing dapat diamati langsung tanpa framework. Deklarasi <!doctype html> meminta browser menggunakan mode standar, atribut lang="id" menyatakan bahasa utama dokumen, dan deklarasi charset memberi tahu browser bahwa byte dokumen ditafsirkan sebagai UTF-8. UTF-8 penting karena contoh selanjutnya berisi karakter seperti © dan emoji secara langsung. Isi awal file sebagai berikut.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Latihan Karakter HTML</title>
</head>
<body>
<h1>Karakter Khusus HTML</h1>
<p>Dokumen ini menggunakan UTF-8.</p>
</body>
</html>Simpan file, lalu buka index.html di browser dengan klik ganda atau menu Open File. Hasil yang diharapkan adalah heading “Karakter Khusus HTML” dan satu paragraf tanpa tag HTML terlihat sebagai teks. Verifikasi juga bahwa tab browser menampilkan judul “Latihan Karakter HTML”. Bila editor menawarkan pilihan encoding, pastikan UTF-8 dipakai. Pada tahap ini belum ada dependency eksternal dan koneksi internet tidak diperlukan. Browser modern cukup untuk seluruh latihan. Jika teks dasar tampil dengan benar, pertahankan struktur dokumen tersebut untuk semua langkah berikutnya; Anda akan mengubah isi di dalam <body>, bukan membuat file baru. Cara ini membuat setiap perubahan mudah dibandingkan dengan source dan mengurangi kemungkinan bahwa perbedaan hasil berasal dari file yang salah.
Tampilkan Karakter yang Beririsan dengan Sintaks HTML
Sekarang gantikan seluruh isi <body> pada index.html dengan contoh berikut, sambil mempertahankan bagian lain dari dokumen. Tujuannya adalah menampilkan ekspresi matematika sederhana dan contoh tag sebagai teks. Karena tanda kurang-dari memiliki arti khusus dalam sintaks HTML, gunakan <. Gunakan pula > untuk pasangan visual yang eksplisit dan & untuk ampersand literal. Perhatikan bahwa code block di bawah menunjukkan source yang harus berada dalam file Anda; browser nanti menampilkan hasil karakter, bukan nama reference-nya.
<body>
<h1>Karakter Khusus HTML</h1>
<p>Perbandingan: 5 < 8 dan 10 > 7.</p>
<p>Nama perusahaan: Riset & Data.</p>
<p>Contoh tag sebagai teks: <strong>tebal</strong></p>
</body>Simpan kemudian muat ulang browser. Hasil yang diharapkan mencakup teks “5 < 8”, “10 > 7”, “Riset & Data”, serta tulisan <strong>tebal</strong> yang terlihat sebagai teks. Kata “tebal” pada contoh terakhir tidak seharusnya berubah menjadi elemen strong, sebab delimiter tag telah direpresentasikan sebagai character reference. Verifikasi dengan membandingkan source editor dan tampilan browser: source mengandung <, sedangkan tampilan mengandung karakter kurang-dari. Kontras ini menunjukkan proses parsing secara langsung. Walaupun lebih-dari biasa sering dapat ditulis langsung pada text content, memakai > di contoh tag membuat pasangan delimiter mudah dipahami. Jangan menyimpulkan bahwa semua tanda baca perlu diubah; kebutuhan selalu bergantung pada aturan parsing dan konteks karakter tersebut.
Gunakan Tanda Kutip Sesuai Konteks Atribut
Tanda kutip menunjukkan mengapa konteks lebih penting daripada daftar karakter “khusus”. Pada text content paragraf, kalimat dengan kutip ganda dapat ditulis langsung. Namun pada nilai atribut yang juga dibatasi oleh ", sebuah kutip ganda literal tidak boleh dibiarkan menjadi delimiter yang menutup nilai sebelum waktunya. Tambahkan contoh berikut sebagai isi <body>. Atribut title menggunakan kutip ganda sebagai delimiter, sehingga kutip yang merupakan bagian dari nilainya ditulis dengan ". Contoh kedua memakai apostrof langsung pada text content karena di sana apostrof bukan delimiter atribut.
<body>
<h1>Tanda Kutip</h1>
<p>Dina berkata, "HTML mudah dibaca."</p>
<p title="Pesan: "Halo"">
Arahkan pointer ke paragraf ini untuk melihat title.
</p>
<p>Hari ini kita belajar apostrof: programmer's note.</p>
</body>Muat ulang halaman. Kalimat pertama seharusnya memperlihatkan kutip ganda secara normal. Arahkan pointer ke paragraf kedua; pada browser desktop yang menampilkan tooltip untuk title, nilainya terbaca sebagai Pesan: "Halo". Untuk verifikasi yang tidak bergantung pada tampilan tooltip, buka DevTools, pilih elemen paragraf tersebut, dan periksa nilai atribut title; DOM memuat karakter kutip sebagai bagian nilainya. Ini menunjukkan bahwa " bukan teks dekoratif, melainkan cara merepresentasikan karakter saat source berada dalam konteks yang mempunyai delimiter sama. Pada aplikasi nyata, jangan memakai atribut title sebagai satu-satunya sarana menyampaikan informasi penting karena aksesibilitas dan perilaku perangkat dapat bervariasi; atribut tersebut digunakan di sini hanya untuk mendemonstrasikan parsing nilai atribut.
Bandingkan Named dan Numeric Character Reference
Satu karakter dapat memiliki lebih dari satu representasi source. Simbol copyright merupakan contoh sederhana karena bisa ditulis langsung sebagai UTF-8, melalui named reference, numeric reference desimal, atau numeric reference heksadesimal. Gantikan isi <body> dengan source berikut. Angka 169 adalah nilai desimal Unicode code point U+00A9, sedangkan 00A9 adalah bentuk heksadesimalnya. Huruf x setelah # menandai bentuk hexadecimal dalam numeric character reference.
<body>
<h1>Referensi Karakter</h1>
<p>UTF-8 langsung: © 2026 Contoh Studio</p>
<p>Named reference: © 2026 Contoh Studio</p>
<p>Desimal: © 2026 Contoh Studio</p>
<p>Heksadesimal: © 2026 Contoh Studio</p>
</body>Setelah file disimpan dan browser dimuat ulang, keempat baris seharusnya menampilkan simbol © yang sama di awal teks. Verifikasinya sederhana: tampilan karakter sama, tetapi source di editor berbeda. Ini menunjukkan bahwa character reference menentukan karakter, bukan gaya visual alternatif. Untuk dokumen UTF-8 modern, bentuk langsung sering menjadi pilihan paling mudah dibaca ketika karakter dapat diketik dan dipelihara dengan baik. Named reference dapat memperjelas simbol umum tertentu, sedangkan numeric reference bermanfaat ketika code point perlu dinyatakan secara eksplisit atau ketika tidak ada named reference yang ingin digunakan. Hindari mengganti karakter hanya berdasarkan kemiripan bentuk; identitas Unicode tetap penting. Dua glyph yang tampak mirip belum tentu code point yang sama dan dapat mempunyai makna tekstual berbeda.
Tampilkan Emoji sebagai Unicode UTF-8
Emoji tidak memerlukan “HTML entity khusus” agar dapat digunakan di dokumen UTF-8. Banyak emoji dapat ditulis langsung sebagai Unicode. Untuk memperlihatkan hubungan tersebut, contoh berikut menampilkan 😀 secara langsung dan sekali lagi sebagai numeric character reference heksadesimal untuk U+1F600. Tambahkan juga simbol hati dengan bentuk emoji yang melibatkan variation selector. Rendering visual dapat berbeda antara sistem operasi, browser, dan font karena bentuk glyph bukan ditentukan HTML semata. Gantikan isi <body> dengan source berikut.
<body>
<h1>Emoji dan Unicode</h1>
<p>Emoji langsung: 😀</p>
<p>Code point U+1F600: 😀</p>
<p>Status: Selesai ✅</p>
<p>Favorit: ❤️</p>
</body>Simpan sebagai UTF-8 lalu muat ulang. Dua baris pertama diharapkan merepresentasikan karakter grinning face yang sama, walaupun desain grafisnya mengikuti platform pengguna. Baris status menampilkan tanda centang emoji jika sistem memiliki dukungan glyph yang sesuai, dan baris terakhir menampilkan hati sesuai pemrosesan Unicode pada platform. Verifikasi utama bukan kesamaan setiap piksel, melainkan bahwa karakter tidak berubah menjadi tanda pengganti akibat file yang salah encoding. Jika emoji tampak sebagai kotak kosong, kemungkinan yang perlu diperiksa mencakup dukungan font atau sistem, bukan langsung menyimpulkan source HTML salah. Emoji yang lebih kompleks juga dapat terdiri dari beberapa code point, misalnya rangkaian dengan variation selector atau zero-width joiner. Karena itu, anggapan “satu emoji selalu satu code point” tidak akurat. Untuk pemula, menulis emoji yang dibutuhkan langsung dalam file UTF-8 adalah pendekatan paling sederhana selama toolchain mempertahankan encoding.
Gabungkan Teknik dan Periksa Source terhadap Hasil Render
Sebagai latihan akhir, susun kembali index.html menjadi dokumen lengkap berikut. Contoh menggabungkan karakter sintaksis, ampersand, tanda kutip, copyright, dan emoji. Bentuk lengkap ini dapat menggantikan seluruh isi file sehingga tidak bergantung pada perubahan dari langkah sebelumnya. Tidak ada JavaScript atau dependency tambahan. Perhatikan pula pada “Bab 1”: karakter tersebut adalah non-breaking space dan dipakai hanya ketika memang diinginkan agar pemutusan baris normal tidak terjadi di antara dua bagian itu, bukan untuk membuat indentasi atau jarak tata letak.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Latihan Karakter HTML</title>
</head>
<body>
<h1>Ringkasan HTML Entities</h1>
<p>Sintaks sebagai teks: <p>Halo</p></p>
<p>Nama: Desain & Teknologi</p>
<p>Kutipan: "Belajar dari source."</p>
<p title="Topik "HTML Entities"">Arahkan pointer ke sini.</p>
<p>Bagian yang dijaga bersama: Bab 1</p>
<p>© 2026 Contoh Studio — Selesai ✅</p>
</body>
</html>Buka kembali file atau muat ulang halaman. Hasil yang diharapkan adalah markup <p>Halo</p> tampil sebagai teks, ampersand muncul tunggal dalam nama, kutipan biasa tetap terbaca, nilai title mengandung tanda kutip, dan simbol © serta emoji muncul sebagai karakter. Gunakan View Source atau editor untuk membandingkan source dengan hasil render; DevTools dapat digunakan untuk melihat DOM setelah parser memproses character reference. Verifikasi khusus dapat dilakukan dengan mempersempit viewport: browser memperlakukan non-breaking space sebagai pengikat terhadap pemutusan baris normal pada posisi itu. Jangan gunakan deretan untuk layout; CSS adalah alat yang sesuai untuk margin, padding, dan tata letak. Jika seluruh pemeriksaan ini sesuai, Anda telah mempraktikkan perbedaan antara encoding dokumen, sintaks source HTML, character reference, dan karakter yang akhirnya tampil.
Verifikasi Akhir dan Parameter Kelayakan
Verifikasi sebaiknya dilakukan pada dua lapisan: source dan hasil parsing. Source memastikan Anda menulis reference pada konteks yang benar, sedangkan browser memastikan reference tersebut menghasilkan karakter yang dimaksud. Jangan hanya menilai dari kemiripan visual karena beberapa simbol dapat terlihat serupa. Untuk latihan ini, dokumen dianggap layak apabila lima parameter berikut dapat diperiksa secara konkret. View Source atau editor cocok untuk memeriksa bentuk source asli; panel Elements di DevTools lebih cocok untuk mengamati DOM yang telah diproses. Perbedaan keduanya memang diharapkan karena character reference dikonsumsi selama parsing HTML.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Karakter kurang-dari pada contoh tag | Berpotensi diperlakukan sebagai awal markup jika ditulis sebagai sintaks mentah yang menyerupai tag. | Source memakai < dan browser menampilkan karakter < sebagai teks. |
| Ampersand literal | Penulisan dapat ambigu dengan awal character reference. | Source memakai & saat escaping diperlukan dan hasilnya satu karakter &. |
| Kutip di atribut berkutip ganda | Kutip literal dapat menutup nilai atribut terlalu dini. | " menghasilkan kutip sebagai bagian nilai atribut. |
| Encoding karakter Unicode | Encoding file dan deklarasi dapat tidak terkontrol. | File disimpan UTF-8 dan memiliki <meta charset="utf-8">. |
| Emoji dan simbol | Dapat diperlakukan seolah semuanya memerlukan named entity. | Unicode langsung atau numeric reference valid menghasilkan karakter yang dimaksud, bergantung dukungan glyph untuk tampilan. |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa halaman menampilkan tulisan < bukannya karakter kurang-dari?
Penyebab umum adalah ampersand pada character reference telah di-escape satu lapisan tambahan. Browser kemudian mendapatkan data yang bermakna sebagai teks <, bukan reference yang pada lapisan tersebut harus berubah menjadi <. Periksa source aktual melalui View Source dan bandingkan dengan sumber yang Anda edit, terutama jika HTML dihasilkan template, CMS, atau program lain. Pada file statis tutorial ini, untuk menampilkan satu karakter kurang-dari sebagai text content, source relevannya cukup menggunakan named character reference <. Hindari memperbaiki masalah dengan menambah atau mengurangi ampersand secara acak. Tentukan lebih dulu berapa lapisan yang memproses data, lalu lakukan escaping tepat pada konteks output HTML.
2. Mengapa emoji tampil sebagai kotak, monokrom, atau berbeda dari perangkat lain?
HTML menentukan karakter, tetapi tidak menjamin desain glyph identik. Browser, sistem operasi, font, dan dukungan Unicode platform memengaruhi rendering. Kotak kosong dapat menandakan font yang dipakai tidak mempunyai glyph yang sesuai, sementara tampilan monokrom tidak dengan sendirinya berarti encoding rusak. Pertama pastikan file benar-benar disimpan sebagai UTF-8 dan deklarasi <meta charset="utf-8"> tersedia. Lalu uji pada browser atau sistem lain. Jika karakter dapat disalin dan dikenali sebagai code point yang benar tetapi tampilannya berbeda, masalahnya lebih mungkin berada pada font/rendering. Jangan mengganti emoji dengan numeric reference dengan harapan reference tersebut memaksa desain grafis tertentu; reference dan karakter langsung dapat menghasilkan karakter Unicode yang sama.
3. Apakah semua tanda kutip harus ditulis sebagai " atau '?
Tidak. Escaping ditentukan konteks. Di text content normal, kutip ganda dan apostrof umumnya dapat ditulis langsung. Di atribut yang nilainya dibatasi kutip ganda, kutip ganda yang merupakan bagian data harus ditangani agar tidak dianggap akhir atribut; " adalah pilihan yang jelas. Prinsip serupa berlaku pada delimiter kutip tunggal. Untuk memverifikasi masalah atribut, periksa source dan panel Elements di DevTools: lihat apakah nilai atribut berakhir pada posisi yang Anda maksud. Biasakan memakai delimiter atribut secara konsisten dan melakukan escaping berdasarkan konteks, bukan mengubah semua tanda kutip secara otomatis. Jika HTML dihasilkan dari data pengguna, gunakan mekanisme escaping yang sesuai dari template atau API yang digunakan, bukan penggantian string manual yang tidak memahami konteks.
4. Kapan sebaiknya memakai , dan mengapa spasi biasa terasa berbeda? menghasilkan U+00A0 NO-BREAK SPACE. Karakter ini berguna ketika dua bagian teks secara semantik ingin dijaga agar tidak dipisahkan oleh pemutusan baris normal, misalnya pada pasangan pendek tertentu. Ia bukan solusi umum untuk membuat kolom, indentasi, atau jarak antarelemen. HTML juga melakukan pemrosesan whitespace normal sehingga deretan spasi biasa dalam banyak konteks teks tidak berfungsi seperti alat layout. Untuk jarak visual, gunakan CSS yang sesuai. Verifikasi efek non-breaking space dengan mempersempit area tampilan dan mengamati perilaku pemutusan baris. Jika tujuan Anda hanya “menggeser teks ke kanan”, penggunaan berulang merupakan tanda bahwa masalah sebenarnya adalah presentasi, sehingga margin, padding, atau layout CSS lebih tepat.
Kesimpulan dan Rencana Aksi
HTML entities atau, lebih tepat dalam pembahasan sintaks ini, character references, paling mudah dikuasai dengan memahami konteks parsing daripada menghafal daftar panjang simbol. Untuk teks HTML, prioritaskan pemahaman terhadap & untuk ampersand dan < untuk kurang-dari, lalu gunakan reference untuk tanda kutip ketika delimiter atribut membuatnya diperlukan. Pahami bahwa named reference seperti © dan numeric reference seperti © dapat menghasilkan karakter yang sama, sedangkan dokumen UTF-8 memungkinkan banyak simbol dan emoji ditulis langsung. Simpan dokumen sebagai UTF-8, deklarasikan charset sejak awal, dan jangan memakai sebagai pengganti CSS untuk layout. Sebagai rencana latihan, pertahankan file index.html dari langkah terakhir, lalu tambahkan beberapa karakter Unicode pilihan Anda dalam tiga bentuk bila memungkinkan: langsung, named reference jika HTML mendefinisikan nama yang relevan, dan numeric reference berdasarkan code point yang telah diverifikasi. Bandingkan View Source dengan DOM di DevTools. Kebiasaan tersebut membangun pemahaman yang lebih kuat tentang source, parsing, Unicode, dan rendering, sekaligus membantu Anda mengenali double escaping dan kesalahan konteks sebelum masuk ke HTML dinamis yang dihasilkan aplikasi.
Ditulis dan diedit oleh Ahmad Ismail Al Malik