Pendalaman Elemen head

Elemen meta charset dan viewport beserta peran head terhadap halaman.

Daftar isi

Elemen head menyimpan metadata, yaitu data tentang halaman yang dibaca browser dan program lain, bukan konten yang dirender di layar. Topik ini membahas dua anggota head yang paling menentukan perilaku halaman, yaitu meta charset dan meta viewport, kemudian menutupnya dengan urutan penulisan elemen head yang lazim digunakan. Setelah mengikuti topik ini, head sebuah halaman dapat disusun lengkap beserta alasan teknis untuk setiap elemennya.

Fungsi head terhadap halaman#

Elemen head adalah wadah metadata dokumen, yaitu data yang menggambarkan halaman bagi browser, mesin pencari, dan aplikasi yang membaca halaman tersebut. Isinya tidak dirender sebagai bagian halaman, sehingga pengguna tidak melihatnya secara langsung. Pengecualiannya adalah elemen title yang tampil pada tab browser, daftar bookmark, dan hasil pencarian. Browser memproses isi head sejak byte pertama dokumen dibaca, jauh sebelum seluruh body selesai diurai, sehingga kesalahan pada head berdampak pada seluruh halaman.

Jenis elemen yang sah di dalam head terbatas, yaitu title, meta, link, style, script, base, dan noscript. Apabila teks ditulis langsung di dalam head, parser memindahkan teks itu ke body secara diam-diam, sehingga halaman tampak normal padahal markupnya tidak valid. Praktik yang benar adalah menempatkan seluruh konten tampil di dalam body dan membiarkan head khusus menampung metadata. Kumpulan elemen head yang paling sering ditulis beserta perannya masing-masing dirangkum pada diagram berikut.

Elemen head yang lazim beserta perannya

Diagram di atas memuat enam elemen, tetapi tidak semuanya wajib. title dan meta charset menjadi dua anggota yang kehadirannya paling krusial, sedangkan sisanya ditambahkan sesuai kebutuhan halaman. Topik ini membahas dua di antaranya secara rinci, yaitu meta charset dan meta viewport, karena keduanya menentukan cara halaman dibaca sejak awal.

meta charset dan batas 1024 byte#

Elemen meta dengan atribut charset menyatakan pengodean karakter (character encoding) dokumen, yaitu aturan penerjemahan deretan byte menjadi karakter. Nilai utf-8 dipilih karena mencakup hampir seluruh aksara yang digunakan saat ini dan menjadi pengodean yang direkomendasikan spesifikasi HTML untuk dokumen baru. Bentuk penulisannya pendek dan tidak memiliki tag penutup, yaitu <meta charset="utf-8">.

Spesifikasi menetapkan satu batas tegas untuk deklarasi ini, yaitu elemen meta yang memuatnya harus terserialisasi sepenuhnya di dalam 1024 byte pertama dokumen. Batas itu ada karena browser mulai mengurai byte dokumen jauh sebelum seluruh berkasnya selesai diunduh. Apabila deklarasi baru ditemui setelah byte ke-1024, browser telah menerka pengodean untuk byte-byte awal tersebut, dan tebakan yang keliru membuat karakter di luar ASCII dasar tampil sebagai karakter rusak (mojibake). Menempatkan meta charset sebagai baris pertama head membuat batas itu terpenuhi tanpa perhitungan tambahan.

Perbedaan antara jumlah karakter dan jumlah byte baru terasa ketika teksnya berhenti menjadi ASCII murni. Hitungan berikut dijalankan dengan Node.js pada berkas JavaScript yang hanya menggunakan logika bahasa tersebut, sehingga dapat direproduksi di terminal.

js Menghitung karakter dan byte UTF-8

const contoh = ["katalog", "café", "naïve", "suhu ±2°C", "日本語"];
for (const kata of contoh) {
  const karakter = [...kata].length;
  const byte = Buffer.byteLength(kata, "utf8");
  console.log(`${kata} = ${karakter} karakter = ${byte} byte`);
}

text Keluaran

katalog = 7 karakter = 7 byte
café = 4 karakter = 5 byte
naïve = 5 karakter = 6 byte
suhu ±2°C = 9 karakter = 11 byte
日本語 = 3 karakter = 9 byte

Kata katalog murni ASCII sehingga satu karakter sama dengan satu byte, sedangkan é pada café menyita dua byte dan setiap aksara Jepang menyita tiga byte. Halaman yang menampilkan teks semacam itu tanpa deklarasi charset yang benar berisiko memperlihatkan byte-byte tersebut secara keliru. Dengan meta charset pada posisi awal, seluruh byte diterjemahkan menggunakan aturan yang sama sejak byte pertama.

meta viewport untuk perangkat bergerak#

Elemen meta dengan nama viewport mengatur lebar dan skala area tampilan pada perangkat bergerak. Nilai yang direkomendasikan oleh dokumentasi MDN dan web.dev adalah width=device-width, initial-scale=1, yaitu lebar tata letak disamakan dengan lebar perangkat dan skala awal ditetapkan 100 persen. Nilai tersebut ditulis pada atribut content, dengan koma sebagai pemisah antar-kuncinya.

Tanpa meta viewport, browser ponsel merender halaman pada lebar maya yang umumnya sekitar 980 piksel, kemudian menampilkannya menyusut agar muat di layar. Halaman yang ditulis tanpa penyesuaian pun tampak seperti versi desktop yang dikecilkan, dengan teks yang terlalu kecil untuk dibaca tanpa dicubung. Dengan width=device-width, lebar tata letak mengikuti lebar perangkat yang sebenarnya, sehingga teks dirender pada ukuran yang nyaman dan CSS responsif yang bertumpu pada media query bekerja dengan lebar yang benar.

Kunci pada atribut content tidak berhenti pada dua nilai tersebut. Nilai initial-scale mengatur perbesaran awal, sedangkan kunci lain seperti maximum-scale dan user-scalable mengatur batas cubitan pengguna. Kunci pembatas perbesaran sebaiknya ditiadakan karena menyulitkan pengguna yang membutuhkan teks lebih besar, misalnya pengguna dengan penglihatan terbatas. Untuk halaman umum, width=device-width, initial-scale=1 sudah menjadi pilihan bawaan yang aman.

Urutan penulisan yang lazim#

Spesifikasi tidak mengatur urutan antarelemen di dalam head, kecuali batas 1024 byte yang mengikat deklarasi charset. Urutan yang lazim digunakan pada proyek nyata lahir dari alasan teknis dan kebiasaan keterbacaan. Susunan berikut diikuti berkas contoh pada topik ini.

meta charset pada baris pertama agar batas 1024 byte terpenuhi sejak byte awal.
meta viewport untuk menyetel tampilan perangkat bergerak.
title sebagai judul dokumen.
meta description sebagai ringkasan bagi mesin pencari.
link untuk berkas CSS halaman.
script beratribut defer untuk skrip eksternal yang boleh menunggu parsing selesai.

Berkas utuh berikut mengumpulkan keenam elemen tersebut dalam satu halaman yang dapat dibuat dan dibuka apa adanya.

html dasar.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pengatur Sensor Suhu</title>
  <meta name="description" content="Catatan pembacaan sensor suhu ruangan beserta pengaturan ambang pemberitahuannya.">
  <link rel="stylesheet" href="gaya.css">
</head>
<body>
  <h1>Pengatur Sensor Suhu</h1>
  <p>Ambang pemberitahuan disetel pada 30 derajat Celsius.</p>
</body>
</html>

Baris 4 menempatkan meta charset lebih awal dari elemen lain apa pun, sehingga deklarasi pengodean pasti berada di dalam 1024 byte pertama. Baris 5 menyetel viewport untuk perangkat bergerak, baris 6 menetapkan judul, dan baris 7 memberi ringkasan isi bagi mesin pencari. Baris 8 memuat berkas gaya gaya.css, sedangkan baris 10 sampai 14 membentuk body yang memuat konten yang dirender. Berkas gaya.css yang dirujuk dibuat lebih dahulu, meski kosong, agar permintaannya tidak gagal. Halaman kemudian dibuka dengan browser untuk memeriksa judul tab Pengatur Sensor Suhu.

Kesalahan umum#

meta charset ditulis setelah banyak elemen lain. Pada head yang padat, deklarasi yang terlambat berisiko melewati batas 1024 byte, dan browser menebak pengodean untuk byte-byte awal. Pindahkan meta charset ke baris pertama head.

meta viewport ditiadakan pada halaman yang menggunakan CSS responsif. Lebar tata letak pada ponsel tetap berada di lebar maya sekitar 980 piksel, sehingga media query tidak pernah menyentuh ukuran layar yang sebenarnya. Tambahkan meta viewport dengan nilai width=device-width, initial-scale=1.

Konten tampil ditulis di dalam head. Parser memindahkan teks tersebut ke body secara diam-diam dan struktur dokumen menjadi tidak valid. Simpan metadata di head, lalu pindahkan seluruh konten tampil ke body.

Ringkasan#

head menyimpan metadata yang dibaca browser dan program lain, sedangkan seluruh konten yang dirender berada di body.
meta charset="utf-8" harus terserialisasi sepenuhnya di dalam 1024 byte pertama dokumen agar pengodean tidak ditebak.
meta name="viewport" content="width=device-width, initial-scale=1" menyamakan lebar tata letak dengan lebar perangkat pada ponsel.
Urutan lazim head dimulai dari charset, viewport, title, description, link, dan ditutup script beratribut defer.

Referensi#

Elemen head — MDN Web Docs — Peran head sebagai wadah metadata dokumen dan elemen yang diperbolehkan di dalamnya.
Elemen meta — MDN Web Docs — Atribut charset dan name pada elemen meta beserta nilainya.
The viewport meta tag — MDN Web Docs — Panduan penulisan meta viewport untuk perangkat bergerak.
Semantics — HTML Living Standard — WHATWG — Aturan deklarasi pengodean karakter, termasuk batas 1024 byte.