Elemen head dan body

Elemen html memiliki dua anak utama yang membagi seluruh isi dokumen: head dan body. Pembagiannya tegas — head memuat metadata yang menjelaskan dokumen, sedangkan body memuat konten yang tampil di layar. Chapter ini membedah pembagian kerja keduanya sekaligus meluruskan salah paham yang paling sering terjadi pada pemula.

head: Metadata Tak Terlihat #

Isi head tidak pernah tampil sebagai bagian halaman. Elemen yang umum ditempatkan di dalamnya:

• title — judul dokumen untuk tab browser dan hasil pencarian.
• meta — informasi ringkas: charset, viewport, dan deskripsi halaman.
• link — tautan ke berkas eksternal, umumnya lembar CSS.
• style — aturan CSS yang ditulis langsung di dokumen.

Keempatnya menjalankan peran penunjang: mengatur cara dokumen dibaca, dinamai, dan ditata — tanpa menyumbang satu pun konten pada area halaman.

body: Konten yang Terlihat #

Semua yang tampil di layar ditulis di dalam body: heading, paragraf, gambar, tautan, daftar, sampai formulir. Ketika kita membuka DevTools dan memeriksa sebuah halaman, hampir seluruh elemen yang kita pilih berada di dalam body.

Contoh Dokumen dengan head Berisi Tiga Elemen #

Perhatikan dokumen berikut — head-nya memuat tiga elemen:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Roti Dewi</title>
</head>
<body>
  <h1>Toko Roti Dewi</h1>
  <p>Roti bakar keju tersedia setiap sore.</p>
</body>
</html>

Hasil Render:

Mari kita telaah isi kedua bagian:

1. Baris 4 (<meta charset="UTF-8">): elemen meta pertama — menetapkan pengodean karakter dokumen (dibahas pada chapter Character Encoding).
2. Baris 5 (<meta name="viewport" ...>): elemen meta kedua — mengatur lebar viewport untuk layar ponsel (dibahas pada chapter Viewport Meta).
3. Baris 6 (<title>...</title>): judul dokumen — tampil pada tab browser, bukan pada halaman (dibahas pada chapter Elemen title).
4. Baris 8-11 (<body>...</body>): wadah konten — heading dan paragraf di dalamnya yang mengisi area halaman.

Tiga elemen head di atas memiliki satu sifat yang sama: tidak satu pun tampil di area halaman. Hasil render hanya memuat isi body.

Perbandingan head dan body #

Urutan Pemrosesan #

Browser membaca head lebih dahulu. Deklarasi charset di dalamnya harus sudah terbaca sebelum byte konten diterjemahkan; judul pada title membuat tab browser dapat menampilkan nama halaman sebelum seluruh konten selesai dimuat. Setelah bagian head selesai diproses, barulah isi body dirender bertahap ke layar.

Ringkasan #

• head memuat metadata (title, meta, link, style) dan tidak pernah tampil sebagai isi halaman.
• body memuat seluruh konten yang terlihat di layar.
• Browser memproses head sebelum body, sehingga charset dan judul terbaca lebih dahulu.
• Jangan tertukar: head berisi metadata; elemen <header> adalah konten di dalam body.

Kedua cabang akar sudah jelas perannya. Chapter berikutnya menyorot elemen wajib pertama di dalam head: title.