Elemen body

Setelah head tersusun, area yang benar-benar dilihat pengunjung tinggal satu tempat: elemen body. Seluruh heading, paragraf, gambar, tautan, dan formulir yang kita tulis tinggal di dalam wadah ini. Menariknya, body punya perilaku khusus: parser HTML memaafkan dokumen yang tidak menuliskan tag body sama sekali. Pada Chapter ini kita membedah peran body, mekanisme pemulihan parser di baliknya, atribut lama yang telah usang, dan hubungannya dengan struktur semantik nanti.

Wadah Konten yang Terlihat #

Body menampung seluruh konten yang dirender di area halaman. Apa pun yang ingin dilihat pengunjung, mulai dari teks utama hingga tombol formulir, wajib berada di dalam elemen ini. Elemen body adalah anak kedua elemen html; posisinya selalu setelah head, dan satu dokumen hanya memuat satu body. Bila kita menulis elemen kedua, validator menandainya sebagai kesalahan struktur.

Pembagian tugas kini lengkap: head menyimpan data tentang halaman, body menyimpan isi halaman. Karena itu, elemen metadata seperti title tidak memiliki tempat di dalam body; validator menolaknya dengan pesan “not allowed as child of element body”. Sebaliknya, konten seperti paragraf tidak boleh menetap di head.

Pemulihan Parser (Error Recovery) #

Parser HTML memiliki aturan bawaan bernama error recovery: saat menemukan markup yang kurang, parser menyisipkan bagian yang hilang dan melanjutkan pemrosesan. Bila tag <html>, <head>, atau <body> tidak ditulis, parser menyisipkan elemennya otomatis; teks maupun elemen yang muncul di luar head dipindahkan ke dalam body.

Perhatikan dokumen berikut yang tidak menuliskan tag body sama sekali:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Halaman Tanpa Tag Body</title>
</head>
<p>Paragraf ini ditulis tanpa tag body apa pun.</p>
</html>

Browser tetap menampilkan paragraf tersebut karena parser menyisipkan <body> otomatis. Validator pun tidak memprotes file seperti ini: pemeriksaan berjalan terhadap pohon hasil pemulihan, dan pohon tersebut sah. Tetap saja, kita tidak menjadikan pola ini kebiasaan; kerangka eksplisit jauh lebih mudah dibaca dan diedit.

Atribut Usang pada Elemen body #

Pada masa HTML lama, tampilan body diatur langsung lewat atribut HTML. Seluruh atribut tersebut kini berstatus usang (obsolete) dan penggantinya adalah CSS:

Validator modern menandai atribut-atribut ini sebagai peringatan berbunyi “obsolete. Use CSS instead”, bukan sebagai error; halaman tetap tampil bila atributnya dipakai. Meski begitu, dokumen baru tidak memakainya lagi: tampilan adalah wilayah CSS, sedangkan HTML menyusun struktur dan makna. Kita akan menatap CSS lebih dekat pada section HTML dan CSS.

Body dan Struktur Semantik #

Setelah melewati beberapa section, isi body kita tidak lagi sekadar tumpukan heading dan paragraf. Pada section Semantic HTML, konten ditata dengan elemen seperti header, main, nav, dan footer. Semua elemen tersebut tetap berada di dalam satu body yang sama; body tetap wadah tunggal, sedangkan elemen semantik membagi isinya menurut peran.

Contoh Dokumen dengan Konten di dalam Body #

File berikut menampung konten latihan Budi di dalam body:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Daftar Belanja Budi</title>
</head>
<body>
  <h1>Daftar Belanja Budi</h1>
  <p>Budi mencatat bahan untuk masak malam ini.</p>
  <p>Daftar pertama berisi beras, ayam, dan bawang merah.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Daftar Belanja Budi" di bagian atas halaman
  - Dua paragraf catatan belanja di bawahnya
  - Teks "Daftar Belanja Budi" pada tab browser

Mari kita telaah peran setiap baris penting di atas:

1. Baris 3-6 (<head> … </head>): metadata berisi pengodean karakter dan judul tab; tidak ada satuan konten di sini.
2. Baris 7-10 (<body> … </body>): satu-satunya body pada dokumen, menampung satu heading dan dua paragraf.
3. Baris 8 (<h1>...): konten pertama yang terlihat; browser merendernya sebagai teks besar dan tebal.
4. Baris 9-10 (<p>...): dua paragraf; browser menyisipkan jarak vertikal di antara keduanya.

Kerangka dokumen kini lengkap sampai ke elemen yang terlihat. Chapter Metadata Dokumen berikutnya kembali ke dalam head untuk menuntaskan elemen meta yang paling sering kita tulis: charset, viewport, dan deskripsi halaman.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen body
• WHATWG — HTML Living Standard: The body element
• MDN Web Docs — Sintaks dasar HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Daftar Belanja Budi</title>
</head>
<body>
  <h1>Daftar Belanja Budi</h1>
  <p>Budi mencatat bahan untuk masak malam ini.</p>
  <p>Daftar pertama berisi beras, ayam, dan bawang merah.</p>
</body>
</html>