Elemen head

Elemen html kita beri dua anak: head dan body. Anak pertama, head, tidak menampilkan satu pun konten di area halaman, tetapi menyimpan informasi yang menentukan judul tab, hasil pencarian, dan pengodean karakter. Banyak pemula menumpuk konten di sini karena salah memahami perannya, atau menulis elemen header dengan harapan berperilaku sama. Pada Chapter ini kita membedah fungsi head, isi yang sah di dalamnya, dan perbedaan tegas antara head dan header.

Wadah Metadata Dokumen #

Head adalah wadah metadata: data tentang dokumen, bukan konten untuk dibaca pengunjung. Analogi paling dekat adalah label pada berkas arsip; label tidak menjadi isi berkas, tetapi menjelaskan berkas tersebut kepada sistem. Metadata yang kita taruh di head mencakup judul dokumen, pengodean karakter, deskripsi halaman, hingga rujukan ke file pendukung seperti ikon dan stylesheet.

Konten di dalam head tidak dirender pada area halaman, tetapi efeknya terlihat di tempat lain. Judul dari elemen title tampil pada tab browser dan daftar bookmark; deskripsi dari elemen meta dapat muncul pada hasil mesin pencari; ikon dari elemen link tampil di samping judul tab. Parser mengetahui konteks ini sejak awal: elemen-elemen di dalam head otomatis diperlakukan sebagai metadata, bukan konten.

Isi yang Sah di dalam Head #

Model konten head tidak menerima elemen apa saja. Tabel berikut memetakan elemen yang sah beserta perannya:

Model konten head menetapkan tepat satu title; elemen base maksimal satu; sisanya boleh berulang. Urutan di antara elemen-elemen tersebut tidak diatur spesifikasi, tetapi dua kebiasaan membantu: meta charset kita letakkan paling atas sejak dini (alasannya dibahas pada Chapter Metadata Dokumen), dan title selalu kita tulis karena wajib.

Head Berbeda dengan Header #

Nama head dan header mirip, sehingga sering tertukar di awal pembelajaran. Keduanya benar-benar berbeda peran:

Elemen header termasuk struktur tampilan halaman dan pembahasannya menanti di section Semantic HTML. Untuk section ini, pegangan praktisnya satu: apa pun yang ingin dilihat pengunjung tulis di body, sedangkan data tentang halaman tulis di head.

Contoh Dokumen dengan Head Lengkap #

File berikut menunjukkan head minimal yang valid beserta kontennya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Catatan latihan HTML milik Siti.">
  <title>Catatan Latihan Siti</title>
</head>
<body>
  <h1>Catatan Latihan Siti</h1>
  <p>Head pada halaman ini berisi metadata dan judul dokumen.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Catatan Latihan Siti" di bagian atas halaman
  - Satu paragraf penjelasan di bawahnya
  - Teks "Catatan Latihan Siti" pada tab browser

Mari kita telaah peran setiap baris penting di atas:

1. Baris 3 (<meta charset="utf-8">): menetapkan pengodean karakter; elemen ini void element tanpa konten maupun tag penutup.
2. Baris 4 (<meta name="description" ...>): deskripsi singkat halaman yang dapat dipakai mesin pencari; tidak tampil di halaman.
3. Baris 5 (<title>...): satu-satunya judul dokumen; teksnya muncul pada tab browser, bukan di area halaman.
4. Baris 8-10 (<body> …): konten yang terlihat; perhatikan bahwa konten halaman memang tidak ada di dalam head.

Head pada file di atas masih sederhana. Seiring chapter bertambah, isi head kita pun bertambah: viewport pada Chapter berikutnya, favicon dan Open Graph pada section Metadata dan SEO.

Chapter Elemen body menanti di urutan berikutnya: wadah untuk seluruh konten yang benar-benar terlihat pengunjung.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen head
• MDN Web Docs — Elemen title
• WHATWG — HTML Living Standard: The head element

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Catatan latihan HTML milik Siti.">
  <title>Catatan Latihan Siti</title>
</head>
<body>
  <h1>Catatan Latihan Siti</h1>
  <p>Head pada halaman ini berisi metadata dan judul dokumen.</p>
</body>
</html>