Debugging HTML

Sebaik apa pun kita menjaga markup, kesalahan tetap lolos: satu tag lupa ditutup, satu huruf tertukar pada nama atribut. Gejala yang terlihat di layar sering tidak berada di dekat penyebabnya — daftar bisa bergeser karena div yang menggantung beberapa bagian di atasnya. Karena itu debugging HTML bukan pekerjaan menebak, melainkan prosedur menelusuri mundur dari gejala ke sumber, dengan dua alat yang telah kita kenal: panel Elements di DevTools dan HTML validator.

Gejala Umum Markup Bermasalah #

Empat keluhan yang sering muncul berikut penyebab markupnya yang lazim:

Keempatnya berbagi akar masalah: browser tidak menolak markup keliru, melainkan mengerjakannya sebisanya.

Parser Memperbaiki Secara Otomatis #

Browser tidak pernah menampilkan dialog kesalahan untuk markup salah. Parser menerapkan aturan pemulihan dari standar HTML: elemen yang tak ditutup ditutup otomatis, tag asing diperlakukan sebagai elemen baru, dan konten yang tak terduga dipindahkan. Hasilnya adalah DOM — pohon dokumen di memori — yang bisa berbeda dari niat markup kita.

Panel Elements di DevTools tidak menampilkan file sumber, melainkan DOM hasil pemulihan tersebut; membandingkan isi panel dengan file asli adalah cara tercepat melihat seberapa jauh parser menggeser dokumen kita.

Kasus: Tag yang Lupa Ditutup #

File galeri berikut ingin menampilkan tag strong sebagai contoh teks di dalam code. Penulis lupa menulis <strong> sebagai character reference, sehingga parser membacanya sebagai elemen sungguhan:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Galeri Foto Liburan</title>
</head>
<body>
  <main>
    <h1>Galeri Foto Liburan</h1>
    <p>Penekanan teks memakai tag <code><strong></code>.</p>
    <figure>
      <img scr="pantai-parang.jpg" alt="Gelombang di pantai Parang">
      <figcaption>Pantai Parang, sore hari.</figcaption>
    </figure>
    <div class="galeri">
      <p>Foto pertama tampil di baris atas.</p>
  </main>
  <footer>
    <p>Galeri dikelola Budi.</p>
  </footer>
</body>
</html>

Laporan validatornya:

Error: End tag “code” violates nesting rules.
From line 10, column 49; to line 10, column 55
Error: End tag “p” seen, but there were open elements.
From line 10, column 57; to line 10, column 60
Error: Unclosed element “strong”.
From line 10, column 41; to line 10, column 48
Error: Element “figure” not allowed as child of element “strong” in this context. (Suppressing further errors from this subtree.)
From line 11, column 5; to line 11, column 12
Error: Element “div” not allowed as child of element “strong” in this context. (Suppressing further errors from this subtree.)
From line 15, column 5; to line 15, column 24
Error: End tag “main” seen, but there were open elements.
From line 17, column 3; to line 17, column 9
Error: Unclosed element “div”.
From line 15, column 5; to line 15, column 24
Error: Element “footer” not allowed as child of element “strong” in this context. (Suppressing further errors from this subtree.)
From line 18, column 3; to line 18, column 10
Error: End tag for  “body” seen, but there were unclosed elements.
From line 21, column 1; to line 21, column 7
Document checking completed.

Sembilan pesan berasal dari satu penyebab: strong yang tersangkut pada baris 10. Parser membiarkannya terbuka, lalu menaruh figure, div, bahkan footer di dalamnya — panel Elements memperlihatkan sarang yang sama. Sesuai pola chapter sebelumnya, perbaikan dimulai dari pesan pertama; setelah <strong> ditulis sebagai <strong> dan penutupnya diatur, hampir seluruh pesan lain ikut bersih.

Kasus: Typo pada Atribut #

Gejala kedua lebih sederhana: gambar tidak muncul. File berikut dimuat untuk memeriksanya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Uji Gambar</title>
</head>
<body>
  <figure>
    <img scr="pantai-parang.jpg" alt="Gelombang di pantai Parang">
    <figcaption>Pantai Parang, sore hari.</figcaption>
  </figure>
</body>
</html>

Error: Attribute “scr” not allowed on element “img” at this point.
From line 9, column 5; to line 9, column 66
Error: Element “img” is missing one or more of the following attributes: “src”, “srcset”.
From line 9, column 5; to line 9, column 66
Document checking completed.

Validator menunjuk baris 9 dua kali: atribut scr tidak dikenal, dan src yang disyaratkan tidak ada — satu huruf tertukar, dua pesan yang saling melengkapi. Typo sejenis juga menyerang nama penanda: elemen tetap tampil, tetapi class yang dicari tak pernah cocok karena nilainya tertulis clases.

Lima Langkah Debugging yang Teratur #

1. Catat gejala dan reproduksikan — tulis apa yang tampak (elemen hilang, layout bergeser, teks menghilang) dan pastikan gejala muncul tiap halaman dimuat.
2. Baca DOM di panel Elements — bandingkan struktur yang tampil dengan niat markup; cari tempat parser menggeser atau menambah elemen.
3. Validasi dokumen — tangani pesan pertama terlebih dahulu; satu perbaikan sering membersihkan banyak pesan.
4. Isolasi bagian yang dicurigai — salin bagian bermasalah ke file minimal, atau beri komentar pada blok besar satu per satu; gejala yang hilang menunjuk blok tersangkanya.
5. Perbaiki satu perubahan, lalu uji ulang — satu penyebab, satu perbaikan; periksa ulang di browser dan validator sebelum melanjutkan.

Hasil Setelah Diperbaiki #

Kedua kasus di atas ditata ulang menjadi satu file galeri yang bersih. Tiga perbaikannya: tag contoh ditulis sebagai character reference, atribut gambar kembali benar, dan seluruh elemen ditutup pada tempatnya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Galeri Foto Liburan</title>
</head>
<body>
  <main>
    <h1>Galeri Foto Liburan</h1>
    <p>
      Penekanan teks ditulis dengan memakai tag
      <code>&lt;strong&gt;</code> di dalam paragraf.
    </p>
    <figure>
      <img src="pantai-parang.jpg" alt="Gelombang putih menghantam karang di pantai Parang" width="600" height="400">
      <figcaption>Pantai Parang, sore menjelang magrib.</figcaption>
    </figure>
    <p>Foto lainnya menyusul sepanjang pekan ini.</p>
  </main>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kalimat yang memuat teks <strong> tampil utuh sebagai teks
  - Foto pantai dari file pantai-parang.jpg (siapkan file gambarnya sendiri)
  - Paragraf "Foto lainnya menyusul" di bawah figure

1. Baris 11-14 (p): <strong> ditulis sebagai <strong> sehingga tampil sebagai teks, bukan sebagai elemen.
2. Baris 15-18 (figure): img kembali memakai src dengan alt deskriptif, dan figcaption menjelaskan fotonya.
3. Baris 9-20 (main): seluruh konten berada di dalam main yang ditutup sebelum body — tak ada elemen menggantung.
4. Baris 19 (p): paragraf penutup berdiri di luar figure, tepat seperti niat markup.

Prosedur ini menutup keterampilan teknis section ini: memeriksa, membaca laporan, merapikan, menjaga konsistensi, dan menelusuri kesalahan. Yang tersisa adalah merangkum semuanya menjadi kebiasaan tetap — itulah isi chapter penutup, checklist kualitas HTML.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Debugging HTML
• Chrome DevTools documentation
• Firefox DevTools user docs

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Galeri Foto Liburan</title>
</head>
<body>
  <main>
    <h1>Galeri Foto Liburan</h1>
    <p>
      Penekanan teks ditulis dengan memakai tag
      <code>&lt;strong&gt;</code> di dalam paragraf.
    </p>
    <figure>
      <img src="pantai-parang.jpg" alt="Gelombang putih menghantam karang di pantai Parang" width="600" height="400">
      <figcaption>Pantai Parang, sore menjelang magrib.</figcaption>
    </figure>
    <p>Foto lainnya menyusul sepanjang pekan ini.</p>
  </main>
</body>
</html>