Saat halaman rusak, dorongan pertama kita adalah mengubah banyak hal sekaligus: memindahkan tag, menghapus elemen, memuat ulang, melihat, mengulang. Cara kerja seperti itu menyulitkan kita mengetahui suntingan mana yang benar-benar berpengaruh — dua suntingan yang dilakukan bersamaan membuat efek keduanya bercampur. Metodologi perbaikan yang terstruktur menahan dorongan tersebut dan menggantinya dengan langkah yang bisa diuji.

Chapter ini merumuskan lima langkah baku, lalu menjalankannya secara utuh pada satu studi kasus.

Lima Langkah Baku #

  1. Reproduksi. Pastikan masalah muncul secara konsisten: buka halaman, amati gejalanya, dan catat keadaan yang gagal agar bisa dibandingkan nanti.
  2. Isolasi. Potong menjadi berkas terkecil yang masih menampilkan masalah; elemen yang tidak relevan dibuang satu per satu sampai gejala tinggal pada intinya.
  3. Baca galat. Jalankan validator dan buka panel Elements; baca pesan sampai baris dan kolomnya, bukan sekadar melihat jumlahnya.
  4. Satu suntingan. Perbaiki satu titik saja, lalu simpan. Satu perubahan berarti satu efek yang bisa dipertanggungjawabkan.
  5. Uji ulang dan validasi. Muat ulang halaman, periksa DOM di Elements, jalankan validator, dan bandingkan dengan catatan pada langkah pertama.

Satu pola layak diingat sebelum masuk ke studi kasus: kesalahan kecil di bagian awal dokumen berdampak luas. Satu tag pembuka yang tidak pernah ditutup menjadikan semua elemen setelahnya anak dari elemen tersebut — styling wadah ikut menyeret seluruh sisa halaman. Karena itu, suntingan kecil sering memperbaiki banyak gejala sekaligus.

Halaman langganan Kedai Kopi Siti tampak bermasalah: footer bergaya seperti kartu — ikut berbingkai dan berlatar seperti kartu di atasnya, padahal seharusnya berdiri sendiri di luar. Struktur sumbernya:

html 
<div class="kartu">
  <h2>Langgankan kabar menu</h2>
  <form action="/langganan" method="post">
    <label for="surel">Alamat email</label>
    <input type="email" id="surel" name="surel">
    <button type="submit">Kirim</button>
  </form>

<footer>© Kedai Kopi Siti 2026</footer>

Kita jalankan lima langkah pada berkas tersebut:

  1. Reproduksi: footer selalu tampil di dalam bingkai kartu setiap halaman dimuat.
  2. Isolasi: salin ke berkas kecil uji-langganan.html tanpa CSS lengkap — gejala tetap muncul, jadi sumbernya di markup.
  3. Baca galat: panel Elements menampilkan footer sebagai anak div class="kartu", bukan saudaranya; validator melaporkan elemen div yang tidak ditutup sampai akhir berkas.
  4. Satu suntingan: tambahkan </div> setelah </form>.
  5. Uji ulang: footer keluar dari bingkai; validator bersih; DOM sesuai niat.

Hasil suntingannya:

html 
<div class="kartu">
  <h2>Langgankan kabar menu</h2>
  <form action="/langganan" method="post">
    <label for="surel">Alamat email</label>
    <input type="email" id="surel" name="surel">
    <button type="submit">Kirim</button>
  </form>
</div>

<footer>© Kedai Kopi Siti 2026</footer>

Mari kita telaah hasilnya:

  1. Baris 8 (</div>): penutup baru menutup kartu tepat setelah form — semua elemen di atasnya berakhir di dalam kartu.
  2. Baris 10 (<footer>): kini saudara kartu, bukan anaknya; styling .kartu tidak lagi menyentuh footer.

Hasil lima langkah di atas bisa dilihat langsung. Perhatikan posisi footer terhadap bingkai kartu pada demo berikut:

Pada demo, tombol Kirim ditahan skrip kecil agar bingkai demo tidak berpindah halaman — yang dibuktikan di sini adalah struktur markupnya, bukan pengiriman datanya.

Footer kini berdiri di luar bingkai kartu — tanpa bingkai, tanpa latar — persis hasil langkah kelima: validator bersih dan DOM sesuai niat. Pada panel Elements, footer tampil sebagai saudara div class="kartu", bukan anaknya; di panel itulah perbaikan struktur seperti ini diverifikasi.

Lima langkah ini bekerja pada semua jenis galat markup. Dua chapter berikutnya menerapkannya pada dua medan yang paling sering menampilkannya: form serta gambar dan link.