Character Encoding

Komputer tidak menyimpan huruf; komputer menyimpan angka. Setiap karakter dipetakan menjadi deretan byte menurut aturan yang disebut character encoding. Selama halaman hanya memuat huruf Latin dasar, hampir semua encoding sepakat. Perselisihan muncul saat halaman memuat karakter seperti tanda hubung panjang (—), huruf beraksen (é), huruf Jepang, atau emoji: byte yang sama dapat diterjemahkan menjadi karakter berbeda oleh encoding yang berbeda. Chapter ini membahas satu baris deklarasi yang mencegah terjemahan salah tersebut.

UTF-8 sebagai Standar Web #

UTF-8 adalah encoding baku web modern. Encoding ini mencakup seluruh karakter Unicode — dari aksara Latin, Arab, dan Jepang sampai emoji — dan dipakai oleh mayoritas halaman web saat ini. HTML Living Standard mewajibkan UTF-8 untuk dokumen baru; encoding lama seperti windows-1252 hanya relevan bagi perawatan halaman lama.

Deklarasi charset #

Deklarasi pengodean ditulis sebagai satu elemen meta di dalam head:

<meta charset="UTF-8">

Standar menempatkan deklarasi tersebut pada 1024 byte pertama dokumen — praktiknya, baris pertama head, sebelum elemen lain. Perhatikan penerapannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Warung Nasi Budi</title>
</head>
<body>
  <h1>Warung Nasi Budi</h1>
  <p>Nasi goreng spesial — Rp20.000 🍛</p>
</body>
</html>

Hasil Render:

Mari kita telaah hubungan kedua bagian tersebut:

1. Baris 4 (<meta charset="UTF-8">): dideklarasikan paling awal; browser membacanya sebelum menerjemahkan byte konten.
2. Baris 9 (<p>...</p>): memuat dua karakter non-ASCII — tanda hubung panjang — dan emoji 🍛 — yang aman karena deklarasi pada baris 4 sudah terbaca lebih dahulu.

Tanpa Deklarasi #

Bila deklarasi charset tidak ada, browser menebak encoding dari isi dokumen. Tebakan yang salah mengubah byte UTF-8 menjadi karakter asing. Tabel berikut memperlihatkan perbandingannya:

Baris ketiga memperlihatkan kasus terparah: byte emoji yang tidak punya padanan ditampilkan sebagai karakter pengganti atau kotak kosong, dan pembaca kehilangan sebagian teks. Halaman bahasa Indonesia memuat karakter non-ASCII lebih sering daripada dugaan — tanda hubung panjang, tanda kutip melengkung, dan emoji sudah cukup memicu permasalahan ini.

Ringkasan #

• Character encoding adalah pemetaan karakter ke byte; encoding yang salah menghasilkan karakter yang salah pula.
• UTF-8 adalah standar web dan diwajibkan HTML Living Standard untuk dokumen baru.
• <meta charset="UTF-8"> ditulis pada 1024 byte pertama — praktiknya, baris pertama head.

Karakter kini terbaca benar. Chapter berikutnya membahas atribut yang menyatakan bahasa dari karakter-karakter tersebut: lang.