Langsung ke konten

Character Encoding di HTML: Mengapa UTF-8 Penting?

Pelajari cara kerja character encoding di HTML. Pahami mengapa UTF-8 menjadi standar dan bagaimana meta charset mempengaruhi tampilan teks.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami HTML Entities, kita lanjut ke character encoding. Topik ini menjelaskan bagaimana komputer menyimpan dan menampilkan teks.

Apa itu Character Encoding?

Character encoding adalah cara komputer mengonversi karakter (huruf, angka, simbol) menjadi angka biner yang bisa disimpan dan diproses.

Tanpa encoding yang tepat, teks akan ditampilkan sebagai karakter yang tidak terbaca (mojibake).

Masalah Tanpa Encoding

Tanpa deklarasi encoding, browser mungkin salah membaca teks:

<!-- Tanpa meta charset -->
<h1>Halo, Dunia!</h1>
<p>Terima kasih sudah membaca.</p>

Browser bisa menampilkan:

Halo, Dunia!
Terima kasih sudah membaca.

Menjadi:

Halo, Dunia!
Terima kasih suda membaca.

Atau karakter yang lebih berantakan tergantung encoding yang digunakan browser.

Meta Charset

Deklarasi encoding di HTML menggunakan meta charset:

<meta charset="UTF-8" />

Letakkan di dalam <head>, sebaiknya di baris pertama:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Judul Halaman</title>
  </head>
  <body>
    <!-- Konten -->
  </body>
</html>

Jenis Character Encoding

ASCII

ASCII (American Standard Code for Information Interchange) adalah encoding pertama:

  • 128 karakter (0-127)
  • Huruf Inggris, angka, simbol dasar
  • Tidak mendukung karakter non-Inggris

ISO-8859-1 (Latin-1)

Pengembangan ASCII:

  • 256 karakter (0-255)
  • Mendukung karakter Eropa Barat
  • Tidak mendukung karakter Indonesia dengan baik

Windows-1252

Encoding default Windows:

  • Mirip ISO-8859-1 tapi dengan beberapa karakter tambahan
  • Masih tidak mendukung semua karakter Unicode

UTF-8

UTF-8 adalah standar encoding modern:

  • Mendukung semua karakter di dunia
  • Kompatibel dengan ASCII
  • Variable length (1-4 byte per karakter)
  • Encoding paling banyak digunakan di web

Mengapa UTF-8?

1. Mendukung Semua Bahasa

UTF-8 bisa menampilkan karakter dari semua bahasa:

<meta charset="UTF-8" />

<p>Indonesia: Selamat datang</p>
<p>Japan: こんにちは</p>
<p>Korea: 안녕하세요</p>
<p>Arabic: مرحبا</p>
<p>Russian: Привет</p>

2. Kompatibel dengan ASCII

Karakter ASCII (0-127) memiliki nilai yang sama di UTF-8:

ASCII 'A' = 65
UTF-8 'A' = 65

Kode HTML lama tetap berfungsi dengan UTF-8.

3. Efisien untuk Teks Barat

Untuk teks Inggris dan Eropa Barat, UTF-8 menggunakan 1 byte (sama efisiennya dengan ASCII).

4. Standar Web

Semua standar web modern menggunakan UTF-8:

  • HTML5
  • CSS3
  • JavaScript (ES6+)
  • JSON

Cara Mengatur Encoding

Di HTML

<meta charset="UTF-8" />

Di File Editor

Pastikan file HTML disimpan dengan encoding UTF-8:

VS Code:

  1. Klik ikon encoding di kanan bawah
  2. Pilih “Save with Encoding”
  3. Pilih “UTF-8”

Notepad++:

  1. Menu Encoding
  2. Pilih “UTF-8”

Di Server

Pastikan server mengirim header encoding yang benar:

Content-Type: text/html; charset=UTF-8

Contoh Masalah Encoding

Teks Indonesia

<!-- Tanpa UTF-8, karakter ini bisa salah -->
<p>Provinsi: D.I. Yogyakarta</p>
<p>Makanan: Gado-gado, Soto Ayam</p>
<p>Terima kasih</p>

Simbol Khusus

<!-- Simbol ini butuh encoding yang tepat -->
<p>Harga: Rp 100.000,00</p>
<p>Suhu: 36,5°C</p>
<p>Ahmad & Budi</p>

Best Practice Encoding

  1. Selalu deklarasikan UTF-8 — <meta charset="UTF-8" />
  2. Simpan file dengan UTF-8 — Pastikan editor menggunakan UTF-8
  3. Hindari encoding lain — Kecuali ada alasan spesifik
  4. Gunakan HTML entities — Untuk karakter khusus yang bermasalah
  5. Test di berbagai browser — Pastikan tampilan konsisten

Karakter Khusus Indonesia

Beberapa karakter Indonesia yang membutuhkan encoding UTF-8:

KarakterKeterangan
ée dengan aksen (contoh: café)
èe dengan grave
ôo dengan circumflex
ñn dengan tilda (contoh: Las Peñas)
<p>Kota Yogyakarta</p>
<p>Kopi Eropa</p>
<p>Resep Masakan</p>

Troubleshooting Encoding

Teks Mojibake

Jika teks muncul sebagai karakter aneh:

  1. Pastikan <meta charset="UTF-8" ada di HTML
  2. Pastikan file disimpan dengan UTF-8
  3. Periksa header Content-Type di server

Karakter Hilang

Jika beberapa karakter tidak muncul:

  1. Gunakan HTML entities sebagai alternatif
  2. Pastikan font yang digunakan mendukung karakter tersebut
  3. Test dengan karakter yang lebih sederhana

Ringkasan

  • Character encoding mengonversi karakter menjadi angka biner
  • UTF-8 adalah standar encoding yang mendukung semua bahasa
  • Selalu gunakan <meta charset="UTF-8" />
  • Simpan file dengan encoding UTF-8
  • UTF-8 kompatibel dengan ASCII
  • Gunakan HTML entities untuk karakter khusus

Langkah Selanjutnya

Kamu sudah memahami character encoding. Artikel selanjutnya membahas head section di HTML, elemen-elemen penting di dalam tag <head>.