Charset dan Viewport

Dua baris metadata paling teknis di head adalah deklarasi charset dan deklarasi viewport. Section Struktur Dokumen telah memperkenalkan keduanya sekilas; Chapter ini mendalami alasan di balik aturannya, arti setiap bagian nilainya, dan posisi yang aman di dalam head. Dua baris ini menentukan apakah teks halaman terbaca dengan benar dan apakah halaman nyaman disaksikan pada layar kecil.

Aturan 1024 Byte untuk meta charset #

Spesifikasi HTML menetapkan: elemen yang membawa deklarasi pengodean karakter harus terserialisasi lengkap di dalam 1024 byte pertama dokumen. Aturan ini lahir dari cara kerja parser: browser memulai pembacaan file dengan pengodean sementara, lalu mencari deklarasi charset sebelum menafsirkan teks lebih jauh. Bila deklarasi berada di luar jendela 1024 byte, parser berhenti mencari dan mempertahankan tebakan awalnya, sehingga teks berpotensi tampil salah meskipun deklarasinya ada di dokumen. Spesifikasi juga melarang lebih dari satu deklarasi charset berbasis meta dalam satu dokumen.

<head>
  <title>Nota Pembelian — Toko Budi</title>
  <style>
    /* ratusan baris CSS dapat mendorong byte deklarasi ke belakang */
  </style>
  <meta charset="utf-8">
</head>

Pada head yang besar, pola di atas berisiko: byte elemen charset dapat terdorong melewati batas. Kebiasaan yang aman adalah menaruh <meta charset="utf-8"> sebagai baris pertama di dalam head, tepat setelah pembuka <head>.

Membedah Nilai Atribut Viewport #

Nilai viewport berupa daftar pasangan nama-nilai yang dipisah koma. Pasangan width=device-width menyamakan lebar viewport dengan lebar layar perangkat yang dihitung dalam CSS pixels, bukan piksel fisik perangkat. Pasangan initial-scale=1 menetapkan perbesaran awal 100 persen dan mencegah penyesuaian skala otomatis saat ada konten yang meluber. Kombinasi keduanya menjadi nilai yang disarankan untuk hampir seluruh halaman web.

Dampak Viewport ke Rendering Mobile #

Tanpa deklarasi viewport, browser mobile merender halaman pada viewport virtual berukuran sekitar 980 piksel, lalu memperkecil hasilnya agar muat di layar. Halaman tampil seperti versi desktop yang diperkecil: teks kecil dan pengunjung dipaksa mencubit layar untuk membaca. MDN menambahkan dampak yang lebih teknis: aturan CSS yang menyasar ukuran layar tertentu (media queries) tidak pernah aktif, sebab lebar halaman yang dihitung browser tetap 980 piksel. Dengan width=device-width, lebar halaman mengikuti layar dan aturan responsif dapat bekerja.

Urutan dan Posisi di dalam Head #

Praktik yang aman menempatkan charset pada baris pertama head, disusul viewport, lalu title dan metadata lainnya. Elemen meta boleh berdiri di mana saja di dalam head, tetapi urutan awal ini menjaga deklarasi charset tetap di dalam jendela 1024 byte bahkan pada head yang besar. Viewport juga layak diletakkan awal karena menyertai penghitungan layout sejak render pertama. Seluruh deklarasi ini tetap tinggal di head; isi body tidak ikut membawanya.

Contoh Head Minimal yang Benar #

File berikut memuat head minimal yang benar untuk halaman nota pembelian Toko Budi:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nota Pembelian — Toko Budi</title>
</head>
<body>
  <h1>Nota Pembelian</h1>
  <p>Pesanan Siti: satu paket biji Gayo 200 gram, dikirim ke Bandung.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Nota pembelian dengan teks utuh (tidak ada mojibake)
  - Pada layar ponsel: lebar halaman mengikuti lebar layar, tanpa zoom out
  - Teks "Nota Pembelian — Toko Budi" pada tab browser

Mari kita telaah peran setiap baris penting di atas:

1. Baris 4 (<meta charset>): baris pertama head; byte deklarasinya selalu berada di dalam 1024 byte pertama dokumen.
2. Baris 5 (<meta name="viewport">): lebar mengikuti perangkat dan skala awal 100 persen; teks nyaman dibaca di ponsel tanpa pinch to zoom.
3. Baris 6 (<title>): teks tab; posisinya setelah dua deklarasi teknis.
4. Baris 10 (<p>): isi halaman; tidak membawa metadata apa pun.

Head minimal kini layak dipublikasikan ke mana pun. Chapter berikutnya menambahkan satu elemen link kecil yang menjaga halaman tetap punya satu alamat utama di mata mesin pencari: Canonical URL.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen meta
• MDN Web Docs — meta name viewport
• WHATWG — HTML Living Standard: The meta element

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nota Pembelian — Toko Budi</title>
</head>
<body>
  <h1>Nota Pembelian</h1>
  <p>Pesanan Siti: satu paket biji Gayo 200 gram, dikirim ke Bandung.</p>
</body>
</html>