Metadata Dokumen

Elemen meta adalah alat utama untuk mengisi head dengan metadata dokumen. Atributnya menentukan pengodean karakter, tampilan di layar ponsel, hingga cuplikan deskripsi pada hasil pencarian. Kesalahan kecil berdampak besar: satu baris charset yang salah membuat teks halaman tampil sebagai deretan simbol aneh. Pada Chapter ini kita menuntaskan metadata dasar yang wajib ada di setiap dokumen.

Elemen meta dan Pola Penulisannya #

Elemen meta adalah void element: tanpa konten dan tanpa tag penutup, seluruh informasinya terkandung pada atribut. Pola penulisannya terbagi tiga:

• charset: menetapkan pengodean karakter dokumen.
• name + content: mendeklarasikan satu jenis metadata beserta nilainya, misalnya deskripsi halaman.
• http-equiv + content: memberi instruksi setara header HTTP.

Semua elemen meta berada di dalam head, dan atributnya tidak boleh dicampur: charset berdiri sendiri tanpa name.

Mendeklarasikan UTF-8 #

Atribut charset="utf-8" mendeklarasikan pengodean karakter dokumen. UTF-8 merepresentasikan seluruh karakter yang dipakai manusia dengan ukuran file yang efisien. Spesifikasi menambahkan syarat posisi: elemen pembawa deklarasi pengodean harus berada seluruhnya dalam 1024 byte pertama dokumen, sehingga kebiasaan meletakkannya tepat setelah pembuka <head> terbukti aman.

Deklarasi yang salah atau hilang membuat browser menebak pengodean file, dan tebakan yang meleset menghasilkan mojibake: karakter tampil sebagai simbol yang tidak berhubungan dengan teks aslinya. Kata Café yang disimpan sebagai UTF-8 tetapi dibaca sebagai Windows-1252 tampil menjadi Café, sedangkan byte yang tidak cocok dengan tabel pengodean mana pun tampil sebagai tanda pengganti �. File contoh pada akhir Chapter ini sengaja memuat karakter é dan em-dash untuk membuktikan deklarasinya bekerja.

Meta Viewport untuk Perangkat Mobile #

Elemen <meta name="viewport" content="width=device-width, initial-scale=1"> mengatur cara browser mobile merender halaman. Tanpa deklarasi ini, browser mobile memakai lebar virtual sekitar 980 piksel lalu memperkecil skala agar halaman muat; teks menjadi kecil dan pengunjung dipaksa mencubit layar (pinch to zoom). Nilai width=device-width menyamakan lebar halaman dengan lebar layar perangkat, sedangkan initial-scale=1 menetapkan perbesaran awal 100 persen. Tata letak responsif pada section selanjutnya bergantung pada pola ini.

Atribut name yang Umum Dipakai #

Tabel berikut memetakan nilai name yang paling sering kita temui:

Mesin pencari sering memakai description sebagai cuplikan teks di bawah judul hasil, sehingga kalimat yang jelas membantu orang memutuskan membuka halaman. Sisi mesin pencari, termasuk robots, Canonical URL, dan Open Graph, disusun terpisah pada section Metadata dan SEO.

Meta http-equiv refresh #

Pola ketiga, http-equiv, memberi instruksi setara header HTTP. Yang paling terkenal adalah refresh otomatis:

<meta http-equiv="refresh" content="30; url=beranda.html">

Nilai content="30; url=beranda.html" menyuruh browser memuat beranda.html setelah 30 detik. Pola ini sah menurut spesifikasi, tetapi halaman yang tiba-tiba memuat ulang mengganggu pembaca, dan pembaca layar membacanya ulang dari awal. Untuk pengalihan permanen, mekanisme di sisi server jauh lebih tepat; gunakan meta refresh hanya pada kebutuhan sederhana.

Contoh Dokumen dengan Metadata Dasar #

File berikut merangkum metadata dasar tadi:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Menu harian Cafe Melati berisi minuman dan kudapan.">
  <meta name="author" content="Budi">
  <title>Menu Cafe Melati</title>
</head>
<body>
  <h1>Menu Cafe Melati</h1>
  <p>Halaman ini memuat tanda em-dash — dan kata Café untuk menguji deklarasi UTF-8.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Menu Cafe Melati" di bagian atas halaman
  - Satu paragraf berisi karakter khusus yang tampil utuh
  - Teks "Menu Cafe Melati" pada tab browser
  - Pada layar ponsel: lebar halaman mengikuti lebar layar perangkat

Mari kita telaah peran setiap baris penting di atas:

1. Baris 4 (<meta charset="utf-8">): deklarasi pengodean, diletakkan paling atas agar berada dalam 1024 byte pertama.
2. Baris 5 (<meta name="viewport" ...>): lebar virtual mengikuti perangkat; teks nyaman dibaca di ponsel.
3. Baris 6 (<meta name="description" ...>): deskripsi halaman untuk mesin pencari; tidak tampil di area halaman.
4. Baris 7 (<meta name="author" ...>): penanda penulis halaman.
5. Baris 11 (isi paragraf): karakter — dan é tampil utuh, bukti deklarasi charset bekerja.

Metadata dasar kini lengkap. Chapter Struktur Dokumen yang Valid berikutnya merakit seluruh potongan kerangka menjadi dokumen utuh beserta ceklis dan cara validator memeriksanya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen meta
• MDN Web Docs — Webpage metadata
• 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">
  <meta name="description" content="Menu harian Cafe Melati berisi minuman dan kudapan.">
  <meta name="author" content="Budi">
  <title>Menu Cafe Melati</title>
</head>
<body>
  <h1>Menu Cafe Melati</h1>
  <p>Halaman ini memuat tanda em-dash — dan kata Café untuk menguji deklarasi UTF-8.</p>
</body>
</html>