Entitas dan Karakter Khusus

Dokumen HTML memakai sejumlah karakter yang sekaligus menjadi bagian sintaksnya, seperti <, >, dan &. Topik ini membahas rujukan karakter (character reference), yaitu penulisan karakter lewat entitas seperti &, beserta alasan karakter tersebut harus diloloskan (escape). Pembahasan mencakup bentuk bernama dan numerik, simbol yang tidak ada di papan ketik, kendali whitespace dengan spasi tanpa putus, dan pelolosan yang dilakukan terprogram.

Mengapa ampersand perlu diloloskan#

Tanda & membuka sebuah rujukan karakter. Ketika parser menemui & di dalam teks, parser berusaha menafsirkan rangkaian karakter berikutnya sebagai entitas hingga titik koma atau hingga polanya jelas bukan entitas. Teks seperti riset & pengembangan yang ditulis apa adanya membuat parser mencoba menafsirkan & pengembangan sebagai rujukan. Akibatnya, markup menjadi tidak valid dan validator melaporkan error, meski browser kerap tetap menampilkannya dengan benar.

Masalah yang lebih sulit dideteksi muncul pada URL. Parameter query dipisahkan &, sehingga atribut href="?halaman=3&urut=naik" memuat &urut yang berpotensi ditafsirkan parser sebagai awal sebuah rujukan. Aturannya tunggal, yaitu setiap ampersand literal di dalam markup ditulis &, termasuk ampersand pada URL di dalam atribut. Dengan aturan itu, atribut yang benar adalah href="?halaman=3&urut=naik". Browser mengirimkan URL dengan ampersand polos setelah entitasnya ditafsirkan.

Tanda kurung sudut dan tanda kutip#

Tanda < wajib ditulis < apabila dimaksudkan sebagai karakter, karena parser memulai tag begitu menemui < yang diikuti huruf. Tanpa pelolosan, teks seperti nilai < 10 berpotensi memotong paragraf atau menghasilkan struktur DOM yang tidak diinginkan. Parser lebih toleran terhadap tanda >, tetapi penulisan > menjaga agar maksud teks tidak tertukar dengan penutup tag.

Kutipan ganda menjadi wajib diloloskan sebagai " di dalam nilai atribut yang dibungkus kutipan ganda, karena kutipan yang sama akan menutup nilai atribut lebih awal. Pada teks biasa, kutipan ganda boleh ditulis polos, meski banyak tim menyeragamkannya dengan entitas. Untuk atribut yang dibungkus kutipan tunggal, pelolosannya adalah ' atau '.

<img src="ikon-arsip.svg" alt='Ikon "arsip"'>
<span title="Ikon &quot;arsip&quot;">arsip</span>

Entitas bernama dan numerik#

Rujukan karakter memiliki dua bentuk. Bentuk bernama memakai nama yang mudah diingat, seperti © untuk © dan   untuk spasi tanpa putus. Bentuk numerik memakai nomor karakter Unicode, ditulis desimal seperti © atau heksadesimal dengan prefiks x seperti ©. Ketiganya menghasilkan karakter yang sama, dan bentuk numerik menjadi jalan keluar ketika nama entitasnya tidak ada.

Titik koma penutup wajib ditulis. Sebagian kecil entitas lama masih ditafsirkan browser meski tanpa titik koma, tetapi penulisan itu tidak valid dan mudah salah tafsir ketika diikuti teks lain. Nama entitas juga peka huruf besar-kecil, sehingga © dikenali sedangkan &Copy; tidak.

Kendali whitespace#

HTML menggabungkan rangkaian spasi, tab, dan baris baru menjadi satu spasi ketika merender teks biasa. Perilaku ini menyederhanakan penulisan markup yang tercetak rapi, tetapi menjadi masalah ketika jarak memang harus dipertahankan, misalnya antara angka dan satuannya. Karakter untuk kebutuhan itu adalah spasi tanpa putus (no-break space), ditulis   dan setara dengan  .

Selain tidak digabung, spasi ini juga mencegah pemutusan baris pada tempat yang ditandai, sehingga 10 km selalu tampil sebagai satu potongan meski barisnya sempit. Pemakaian yang wajar meliputi penyambungan angka dengan satuannya, jam dengan menitnya, dan singkatan dua huruf. Deretan   untuk mengatur lekukan tata letak bukan pemakaian yang wajar karena tugas itu milik CSS.

  adalah karakter sungguhan, dan hal itu dapat dibuktikan dari byte penyimpanannya. Perintah berikut menampilkan byte dari teks 10 km yang disambung spasi tanpa putus.

# tampilkan byte dari teks "10 km" yang disambung spasi tanpa putus
printf '10\xc2\xa0km' | od -c

0000000   1   0 302 240   k   m
0000006

Keluaran di atas menunjukkan byte 302 240 di antara angka dan huruf dalam notasi oktal od, yaitu pasangan byte UTF-8 untuk U+00A0. Karakter itu bukan spasi biasa, sehingga browser memperlakukannya berbeda saat menggabungkan whitespace dan memutus baris.

Meloloskan teks secara terprogram#

Ketika teks dibangun secara terprogram, pelolosan dilakukan dengan fungsi, bukan dengan pengeditan manual. Urutan penggantian penting, yaitu ampersand harus diloloskan lebih dahulu, karena penggantian < dan > menghasilkan < dan > yang memuat ampersand. Kode berikut memperlihatkan fungsi pelolosan minimal beserta akibat urutannya.

// meloloskan teks agar aman disisipkan ke dalam elemen HTML
function loloskan(teks) {
  return teks
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

console.log(loloskan("a & b"));
console.log(loloskan("nilai < 10 dan > 5"));
console.log(loloskan("ampersand &lt; yang sudah berbentuk entitas"));

a & b
nilai < 10 dan > 5
ampersand < yang sudah berbentuk entitas

Dua baris pertama adalah pelolosan yang benar. Baris ketiga memperlihatkan pelolosan ganda, yaitu entitas < yang sudah benar ikut diubah menjadi < sehingga halaman menampilkan teks < alih-alih tanda <. Pelolosan ganda muncul ketika teks yang sudah lolos diloloskan lagi, dan menjadi salah satu bug yang paling umum pada penanganan konten dinamis.

Kesalahan umum#

• Ampersand pada URL atribut tidak diloloskan. Penulisan href="?a=1&b=2" membuat markup berisiko salah tafsir, sedangkan href="?a=1&b=2" aman dan menghasilkan URL yang sama.
• Titik koma entitas ditinggalkan. Browser sering tetap menampilkan karakternya, tetapi markupnya tidak valid, dan kebiasaan ini menular ke kasus yang benar-benar salah tafsir.
•   dipakai untuk tata letak. Menyambung beberapa spasi tanpa putus untuk mendorong teks membuat halaman kaku pada layar sempit, sedangkan pengaturan jarak adalah tugas CSS.
• Teks dari sumber luar disisipkan tanpa pelolosan. Konten yang memuat < atau & dapat memecah struktur markup, dan pada konten dari pengguna lain kebiasaan itu membuka celah injeksi.

Ringkasan#

• Ampersand literal ditulis &, termasuk pada URL di dalam atribut, karena & membuka rujukan karakter.
• < wajib untuk tanda < dalam teks, sedangkan " diperlukan di dalam nilai atribut ber-kutipan ganda.
• Bentuk bernama seperti © dan bentuk numerik seperti © menghasilkan karakter yang sama, dengan titik koma yang wajib ditulis.
•   adalah karakter U+00A0 yang tidak digabung dan tidak memutus baris, cocok untuk menyambung angka dengan satuannya.

Referensi#

• Syntax — HTML Living Standard — WHATWG — Aturan rujukan karakter pada sintaks HTML.
• Named character references — HTML Living Standard — WHATWG — Daftar lengkap entitas bernama beserta karakternya.
• Character reference — MDN — Definisi rujukan karakter dan contoh bentuknya.