Penyarangan (nesting) menentukan bukan hanya bentuk visual halaman, tetapi juga keabsahan struktur dokumen. Standar HTML menetapkan konten model: setiap elemen hanya boleh memuat jenis konten tertentu. Sebagian aturannya longgar, sebagian lagi ketat — dan melanggar aturan yang ketat membuat parser menata ulang kode kita tanpa memberi tahu.

Chapter ini membahas tiga larangan klasik yang paling sering dialami pemula beserta cara memperbaikinya.

Konsep Konten Model #

Setiap elemen memiliki kategori konten yang boleh ditampungnya — misalnya kategori flow dan phrasing yang dipakai spesifikasi. Kita tidak perlu menghafal daftar kategorinya; cukup pegang prinsipnya: sebelum menaruh elemen di dalam elemen lain, pastikan induknya memang menerima jenis konten tersebut. Pelanggaran yang paling sering terjadi adalah menaruh elemen tingkat blok ke dalam elemen penampung teks.

Larangan 1: Elemen Blok di dalam p #

Elemen <p> hanya boleh memuat konten frasa — teks dan elemen sejenis strong atau a. Elemen blok seperti <div> tidak boleh berada di dalamnya:

html 
<p>Budi menjual kopi.
  <div>Harga mulai Rp15.000.</div>
</p>

Saat parser bertemu <div> di dalam <p>, parser menutup paragraf secara otomatis lebih dulu. Akibatnya penutup </p> di akhir tidak lagi berpasangan, dan DOM hasilnya memuat dua paragraf terpisah plus sebuah paragraf kosong — berbeda dari yang tertulis di kode. Bentuk yang benar meletakkan keduanya berdampingan:

html 
<p>Budi menjual kopi.</p>
<div>Harga mulai Rp15.000.</div>

Larangan 2: Anak Langsung ul Harus li #

Elemen <ul> hanya menerima <li> sebagai anak langsungnya. Paragraf atau heading tidak boleh menempel di dalamnya:

html 
<ul>
  <p>Catatan: menu dapat berubah.</p>
</ul>

Untuk kasus ini parser justru tidak memindahkan apa pun — paragraf tetap menempel di dalam daftar pada DOM, dan validator menandainya sebagai struktur tidak sah. Perbaikannya memindahkan paragraf ke luar daftar:

html 
<p>Catatan: menu dapat berubah.</p>
<ul>
  <li>Kopi susu</li>
  <li>Teh melati</li>
</ul>

Hasil Render:

Larangan 3: Tautan di dalam Tautan #

Elemen <a> tidak boleh berada di dalam elemen <a> lain:

html 
<a href="menu.html">Lihat <a href="harga.html">harga</a></a>

Parser menjalankan mekanisme pemisah khusus: tautan luar ditutup secara otomatis saat tautan dalam ditemui. DOM hasilnya berupa dua tautan berdampingan, bukan tautan bersarang — dan sebagian teks bisa berpindah induk. Tulis keduanya sebagai tautan terpisah di dalam kalimat:

html 
<p>Lihat <a href="menu.html">menu</a> dan <a href="harga.html">harga</a>.</p>

Mari kita telaah baris di atas:

  1. Baris 1 (<p>): kalimat menjadi penampung kedua tautan — keduanya sibling, bukan bersarang.
  2. Baris 1 (dua <a>): masing-masing tautan berdiri sendiri dengan href sendiri.

Struktur Berjenjang Lainnya #

Tabel memiliki struktur berjenjang yang wajib: sel td harus berada di dalam tr, dan tr di dalam table atau thead/tbody. Melewati satu tingkat — misalnya menulis td langsung di bawah table — menghasilkan struktur tidak sah. Pembahasan lengkapnya menunggu Section tables.

Ringkasan #

  • Konten model menentukan jenis konten yang sah di dalam tiap elemen.
  • <p> tidak boleh memuat elemen blok seperti <div> — parser memisahkannya otomatis.
  • Anak langsung <ul> dan <ol> hanya boleh <li>.
  • <a> tidak boleh bersarang dalam <a> lain.
  • Tabel mensyaratkan jenjang td → tr → table/bagian tabel.

Chapter penutup Section ini merangkum seluruh kesalahan struktur klasik dalam satu tabel rujukan cepat.