Pada chapter Mengenal Elemen HTML, kita sudah melihat bahwa elemen dapat menampung elemen lain. Chapter ini memperdalam aturan tersebut pada satu ketentuan yang paling sering dilanggar: urutan penutupan. Pelanggarannya tidak memunculkan pesan galat di browser, tetapi diam-diam mengubah struktur dokumen menjadi berbeda dari maksud penulis.
Aturan Urutan Penutupan #
Aturannya satu kalimat: tag penutup ditulis dalam urutan terbalik dari urutan tag pembuka. Bila elemen A dibuka, lalu elemen B dibuka di dalam A, maka B wajib ditutup lebih dahulu, baru kemudian A. Pola ini dikenal sebagai penutupan urutan terakhir-ditutup-pertama.
Contoh penyarangan yang benar:
<ul>
<li>Kopi susu <strong>gula aren</strong> — Rp18.000</li>
<li>Teh <em>tarik</em> — Rp15.000</li>
</ul>Mari kita telaah urutan pembukaan dan penutupan pada baris 2: elemen li dibuka lebih dulu, lalu elemen strong di dalamnya. Saat menutup, urutannya dibalik — strong ditutup lebih dahulu (</strong>), baru li (</li>). Baris 3 memperlihatkan pola yang sama dengan elemen em. Setiap anak selesai sepenuhnya sebelum induknya ditutup.
Hasil render dari penyarangan yang benar — penekanan tampil tepat pada teks yang dibungkusnya:
Contoh Penyarangan yang Salah #
Sekarang bandingkan dengan markup yang menindih dua elemen:
<p>Siti memesan <strong>kopi <em>gula aren</strong></em>.</p>Urutan penulisannya: strong dibuka, em dibuka di dalamnya, tetapi strong ditutup lebih dahulu — padahal em masih terbuka. Tag pembuka dan penutup kedua elemen saling menindih; penutup em berada di luar strong yang membukanya.
Analogi Kotak #
Cara membayangkan aturan ini adalah kotak: elemen strong adalah kotak kecil yang dimasukkan seluruhnya ke dalam kotak besar p. Kotak tidak dapat masuk setengah — begitu pula elemen: seluruh isi elemen anak harus berada di dalam elemen induknya, dan penutup anak harus muncul sebelum penutup induk.
Analogi kotak punya batas. Elemen HTML bukan benda fisik yang punya sisi rapat — dua elemen bersaudara boleh menempel tanpa pembatas apa pun, dan elemen induk boleh menampung teks, elemen, maupun keduanya sekaligus. Gunakan analogi ini hanya untuk satu pesan: tumpang tindih penutupan tidak dibenarkan.
Konsekuensi Penutupan yang Salah #
Browser tidak menampilkan pesan galat untuk markup di atas. Parser memperbaikinya sendiri dengan aturan pemulihan: ketika tag </strong> ditemukan sedangkan em masih terbuka, parser menutup elemen em lebih awal, lalu membuka elemen em baru untuk menampung sisa konten sampai penutup </em> ditemukan.
Hasil perbaikan tersebut tidak sama dengan maksud penulis: elemen em terbelah menjadi dua, teks berpindah tempat, dan struktur pohon akhirnya berbeda dari urutan tag yang tertulis. Pada contoh singkat di atas efeknya nyaris tak terlihat; pada dokumen besar dengan div, daftar, dan tabel bersarang, struktur hasil pemulihan bisa menjauh jauh dari niat awal.
Markup yang salah di atas tidak bisa didemokan apa adanya — validator menolaknya — tetapi hasil pemulihan parser-nya sah, dan inilah struktur yang sebenarnya dibentuk browser dari blok tersebut:
Tampilannya nyaris sama dengan maksud semula — dan justru itulah bahayanya: perbedaan hanya ada pada struktur DOM yang dibentuk, bukan pada layar. Buka berkas milikmu sendiri lalu periksa panel Elements; pohon elemen di sana tidak lagi sama dengan urutan tag yang tertulis.
Ringkasan #
- Tag penutup ditulis urutan terbalik dari tag pembuka: elemen terakhir dibuka ditutup lebih dulu.
- Tag yang saling menindih tidak memunculkan galat; parser memperbaikinya dengan menutup dan membuka ulang elemen.
- Struktur hasil pemulihan parser dapat berbeda dari maksud penulis — periksa lewat panel Elements.
Urutan penutupan sudah dikuasai. Chapter penutup Section ini merangkai seluruh penyarangan menjadi satu gambar utuh: pohon dokumen beserta istilah relasinya.