Browser yang pemaaf membuat kesalahan markup nyaris tidak terasa: halaman tetap tampil, tidak ada pesan, tidak ada peringatan. Untuk mengetahui apakah dokumen kita memenuhi aturan baku HTML, kita membutuhkan pembaca yang ketat — validator. Alat resmi dan gratisnya adalah W3C Markup Validation Service di validator.w3.org, dirawat oleh W3C.

Chapter ini membahas cara memakai validator, membaca laporannya, dan alur kerja perbaikan yang mengikutinya.

Tiga Cara Memeriksa #

Validator W3C menerima dokumen lewat tiga jalur masuk:

  1. Validate by Address — tempel URL halaman yang sudah daring; validator mengunduh dan memeriksanya.
  2. Validate by File Upload — unggah file HTML dari komputer; cocok untuk halaman yang masih lokal.
  3. Validate by Direct Input — tempel kode langsung ke kotak teks; cocok untuk potongan pendek saat belajar.

Ketiganya memeriksa dengan aturan yang sama; pilihan hanya menyesuaikan posisi berkas kita.

Membaca Laporan #

Hasil pemeriksaan berupa daftar pesan yang terbagi dua kelompok. Error berarti aturan baku dilanggar — markup dianggap tidak sah. Warning berarti dokumen tetap sah, tetapi validator menyarankan perbaikan. Setiap pesan menyebut posisi dalam format baris dan kolom, sama seperti pesan galat pada umumnya. Perhatikan berkas bermasalah berikut:

html 
<!DOCTYPE html>
<html lang="id">
<body>
  <p>Menu spesial: <em>kopi gula aren</span></p>
  <ul>
    <div>Paket hemat</div>
  </ul>
  <img src="kopi.png" alt="Kopi gula aren" class="foto" class="utama"></img>
</body>
</html>

Laporan validator untuk berkas tersebut berbentuk seperti ini (contoh tiruan, angka mengikuti berkas di atas):

text 
Error: Stray end tag "span".
From line 4, column 38; to line 4, column 44

Error: Element "div" not allowed as child of element "ul".
From line 6, column 5; to line 6, column 9

Error: Duplicate attribute "class".
At line 8, column 57

Error: Stray end tag "img".
From line 8, column 70; to line 8, column 75

Mari kita baca keempat pesan tersebut satu per satu:

  1. Pesan pertama (baris 4, kolom 38): penutup </span> tidak punya pembuka — “stray” berarti liar/tanpa pasangan. Kolom menunjuk karakter < pertama dari penutup tersebut; kita membuka berkas, lompat ke baris 4, dan langsung tahu titik sunting.
  2. Pesan kedua (baris 6, kolom 5): div bukan anak yang diizinkan ul — induk daftar hanya menerima li dan elemen pendukung skrip.
  3. Pesan ketiga (baris 8, kolom 57): satu tag memuat atribut class dua kali; kolom menunjuk salinan kedua, yang perlu dihapus.
  4. Pesan keempat (baris 8, kolom 70): img adalah void element; penutup </img> tidak dikenali sehingga dilaporkan liar.

Validator adalah layanan daring di validator.w3.org — antarmuka dan laporannya tidak bisa disematkan sebagai demo di dalam halaman ini. Jalankan sendiri: tempel berkas bermasalah di atas ke kolom Validate by Direct Input, lalu bandingkan laporan yang muncul dengan empat pesan pada contoh di atas.

Alur Kerja Perbaikan #

Validator bukan alat sekali jalan — ia bekerja paling baik dipakai berulang:

  1. Validasi seluruh dokumen, lalu baca pesan paling atas.
  2. Perbaiki satu titik saja — satu suntingan, satu penyimpanan.
  3. Validasi ulang; daftar pesan akan berubah.
  4. Ulangi sampai Error habis, lalu tinjau Warning yang relevan.

Validator menunjukkan di mana aturan dilanggar. Dua chapter berikutnya membedah dua keluarga pelanggaran yang paling sering terjadi: nesting yang bergeser dan atribut yang hilang.