Kesalahan struktur hampir selalu tidak terlihat di layar. Browser dirancang menoleransi markup bermasalah: parser memperbaiki, menutup, atau memindahkan elemen agar halaman tetap tampil. Persoalannya, DOM hasil perbaikan bisa berbeda dari maksud kita — dan CSS serta pembaca layar membaca DOM tersebut, bukan maksud kita.
Chapter penutup Section ini merangkum enam kesalahan klasik dalam satu tabel rujukan, lalu melatih pola pikir memperbaikinya secara sistematis.
Enam Kesalahan Klasik #
Tabel berikut merangkum kesalahan yang paling sering muncul, gejalanya, dan perbaikannya:
| # | Kesalahan | Gejala | Akibat | Perbaikan |
|---|---|---|---|---|
| 1 | tag penutup hilang | pembuka tanpa pasangan | elemen berikutnya ikut menjadi isi elemen tak tertutup | tambahkan penutupnya |
| 2 | nesting terbalik | </p></strong> untuk <p><strong> | parser menutup paksa; DOM berubah | tutup elemen terdalam lebih dulu |
| 3 | void element diberi penutup | </br>, </img> | token galat dibuang parser | hapus penutupnya |
| 4 | atribut di tag penutup | <p>...</p lang="id"> | atribut diabaikan | pindahkan ke tag pembuka |
| 5 | elemen blok di dalam p | <div> di dalam paragraf | paragraf terpotong dua | keluarkan blok dari p |
| 6 | huruf besar-kecil campuran | <DIV> bergantian <div> | kode sulit dibaca dan tidak seragam | konsisten huruf kecil |
Kesalahan nomor enam bukan galat parser — nama tag memang tidak membedakan huruf — tetapi masalah konsistensi yang merumitkan perawatan kode pada proyek besar.
Contoh Gabungan #
Satu potongan kode bisa memuat beberapa kesalahan sekaligus. Perhatikan contoh berikut:
<div>
<p>Stok kopi:
<div>Arabika habis</div>
<img src="kopi.png" alt="Biji kopi"></img>
</div>Kode di atas memuat tiga masalah: <div> berada di dalam p (kesalahan 5), penutup </p> hilang (kesalahan 1), dan <img> diberi tag penutup </img> (kesalahan 3). Bentuk yang diperbaiki:
<div>
<p>Stok kopi: arabika habis.</p>
<img src="kopi.png" alt="Biji kopi">
</div>Mari kita telaah kode yang telah diperbaiki:
- Baris 2 (
<p>...</p>): paragraf kini hanya memuat teks dan ditutup lengkap. - Baris 3 (
<img ...>): gambar keluar dari paragraf menjadi sibling-nya; void element ditulis tanpa penutup. - Baris 4 (
</div>): penutup wadah terakhir — urutan cermin pembuka terjaga.
Bandingkan dengan blok bermasalah di atas: versi perbaikan berikut lolos validator dan membentuk DOM yang persis seperti tertulis — paragraf, gambar, dan wadah masing-masing berdiri pada posisinya:
Pada demo, kopi.png diganti placeholder SVG agar gambarnya terlihat; markup-nya sama persis dengan blok perbaikan. Blok galatnya sendiri sengaja tidak didemokan — markup yang ditolak validator tidak punya hasil render yang bisa dipertanggungjawabkan.
Cara Berpikir Perbaikan #
Galat struktur diperbaiki dengan pola empat langkah, bukan dengan menebak:
- Jalankan validator dan baca daftar pesan beserta nomor barisnya.
- Prioritaskan galat paling atas. Satu galat di bagian awal dokumen sering memicu deret galat ikutan; memperbaiki pangkalnya menghapus banyak pesan sekaligus.
- Perbaiki satu galat, simpan, lalu jalankan ulang validator. Jangan mengubah banyak titik sekaligus agar setiap perubahan jelas dampaknya.
- Uji render. Buka halaman di browser dan periksa panel Elements di DevTools untuk memastikan DOM yang dibentuk memang sesuai maksud kita.
Alat dan langkah validasi dibahas tuntas pada Section validasi-dan-debugging, khususnya chapter html-validator dan memperbaiki-markup; kebiasaan membandingkan DOM di DevTools dilatih pada chapter membaca-html-di-devtools.
Ringkasan #
- Enam kesalahan klasik: penutup hilang, nesting terbalik, void berpenutup, atribut di penutup, blok dalam
p, huruf campuran. - Browser menoleransi kesalahan, tetapi DOM hasil perbaikannya bisa menyimpang dari maksud kita.
- Pola perbaikan: validator → galat teratas → perbaiki satu → uji ulang.
- Rujukan lanjutan: Section validasi-dan-debugging.
Struktur elemen dan atribut telah tuntas. Section berikutnya, Text dan Semantics, membahas elemen-elemen untuk menandai makna teks: heading, penekanan, kutipan, dan elemen teks lainnya.