Kesalahan Nesting

Kesalahan nesting jarang menampilkan pesan galat apa pun di layar. Gejalanya yang tampil: elemen terdorong keluar dari posisi yang kita maksud, teks muncul di tempat yang tidak kita inginkan, atau efek CSS tidak menempel pada elemen sasarnya. Kita mudah menyangka CSS-nya yang salah, padahal sumber masalahnya ada di markup — elemen diletakkan pada induk yang tidak mengizinkannya.

Chapter ini membedah tiga kasus klasik dengan pola yang sama: kode yang kita tulis, DOM yang benar-benar terbentuk, lalu perbaikannya.

Tiga Jalur Penelusuran #

Sebelum membedah kasus, tiga alat membantu kita menemukan kesalahan nesting:

1. Validator — melaporkan posisi pelanggaran aturan anak-induk (baris dan kolom).
2. Panel Elements — menampilkan DOM aktual; kita bandingkan struktur pohon dengan niat semula.
3. Indentasi rapi — pada kode berspasi konsisten, kesalahan nesting terlihat sebagai lekukan yang tidak sejajar.

Kasus 1: Elemen Blok di Dalam p #

Paragraf hanya boleh memuat teks dan elemen frasa; div tidak termasuk. Berikut kode yang salah:

<p>Stok kopi hari ini:
  <div>Arabika habis, Robusta tersisa.</div>
</p>

Parser tidak menolak div — ia menutup paksa paragraf sebelum memasukkannya. DOM yang terbentuk:

<p>Stok kopi hari ini:</p>
<div>Arabika habis, Robusta tersisa.</div>
<p></p>   ← dibuat ulang oleh </p> yang kehilangan pasangan

Mari kita telaah yang terjadi:

1. <div> pada baris 2: parser menutup p begitu bertemu div, sehingga paragraf berakhir sebelum waktunya.
2. </p> pada baris 3: penutup ini tidak menemukan p yang masih terbuka; parser membuat p kosong baru lalu langsung menutupnya — halaman mendapat satu paragraf kosong ekstra.

Bentuk yang benar — div keluar menjadi saudara paragraf:

<p>Stok kopi hari ini:</p>
<div>Arabika habis, Robusta tersisa.</div>

Kasus 2: Teks Telanjang di Dalam ul #

Daftar hanya mengizinkan li (dan elemen pendukung skrip) sebagai anaknya. Berikut kode yang salah:

<ul>Pilih ukuran:
  <li>Reguler</li>
  <li>Jumbo</li>
</ul>

Teks pengantar tetap lolos ke DOM, tetapi berada di luar semua li:

<ul>
  "Pilih ukuran:"   ← simpul teks, bukan butir daftar
  <li>Reguler</li>
  <li>Jumbo</li>
</ul>

Akibatnya: teks tampil tanpa penanda butir, pembaca layar tidak mengumumkannya sebagai item daftar, dan validator melaporkan ul berisi anak yang tidak sah. Perbaikannya memindahkan teks ke paragraf sebelum daftar:

<p>Pilih ukuran:</p>
<ul>
  <li>Reguler</li>
  <li>Jumbo</li>
</ul>

Mari kita telaah perbaikannya:

1. Baris 1 (<p>Pilih ukuran:</p>): teks pengantar pindah menjadi paragraf — induk yang sah untuk teks.
2. Baris 2–5 (<ul>): daftar kini hanya berisi li; setiap teks berada di dalam butirnya.

Kasus 3: Tag Tumpang Tindih #

Tag pembuka dan penutup harus bersarang seperti cermin: elemen yang dibuka terakhir ditutup lebih dulu. Berikut pelanggarannya:

<b>tebal <i>miring</b> dan tebal lagi</i>

Parser menolak tumpang tindih lewat mekanisme adopsi: saat </b> datang, i yang masih terbuka diadopsi keluar, lalu parser membuka i baru agar format miring tetap berlanjut. Hasil di DOM:

<b>tebal <i>miring</i></b>
<i> dan tebal lagi</i>

Teks “dan tebal lagi” kehilangan efek tebal yang kita maksud karena berada di luar b. Perbaikannya menutup i sebelum b:

<b>tebal <i>miring</i> dan tebal lagi</b>

Mari kita telaah hasilnya:

1. <i>miring</i>: elemen miring ditutup lebih dulu — cermin dari urutan pembukaannya.
2. <b>...</b> pembuka pertama, penutup terakhir: satu elemen b memuat seluruh teks, sehingga efek tebal berlaku sampai akhir sesuai niat semula.

Versi perbaikan ketiga kasus di atas menghasilkan DOM yang persis seperti tertulis — ketiganya bisa dilihat hasilnya sekaligus di sini:

Blok bermasalah pada ketiga kasus di atas sengaja tidak didemokan — hasil rendernya adalah DOM hasil koreksi parser yang menyimpang dari niat, bukan contoh yang layak ditiru.

Pada kasus pertama, paragraf dan wadah berdiri berdampingan tanpa paragraf kosong ekstra. Pada kasus kedua, teks pengantar tampil sebagai paragraf dan dua butir daftar memakai penanda butirnya. Pada kasus ketiga, seluruh frasa — termasuk “dan tebal lagi” — benar-benar tebal, karena seluruhnya berada di dalam b sesuai niat semula.

Ketiga kasus menunjukkan pola yang sama: patuhi aturan anak-induk sejak menulis. Keluarga kesalahan berikutnya lebih sunyi lagi — atribut penting yang tidak pernah ditulis sama sekali.