Validator HTML

Setiap contoh pada course ini melewati satu pintu yang sama sebelum tampil di hadapan kita: Nu Html Checker, validator resmi W3C yang berjalan di validator.w3.org/nu/. Alat ini memeriksa dokumen terhadap ketentuan HTML Living Standard dan melaporkan pelanggaran beserta letaknya. Chapter terakhir ini merapikan cara memakai validator, cara membaca laporannya, opsi ringkas dari baris perintah, dan batasannya. Tujuannya satu: kebiasaan memvalidasi yang telah dibangun sepanjang course terbawa terus ke proyek nyata.

Tiga Cara Memvalidasi #

Halaman validator menawarkan tiga pintu masuk untuk dokumen yang diperiksa:

• Validate by URI: tempel alamat halaman yang telah tayang; cocok untuk memeriksa situs daring.
• Validate by file upload: unggah berkas .html dari komputer; cocok untuk draf lokal.
• Validate by direct input: tempel markup langsung ke kotak teks; tercepat untuk potongan kode.

Ketiganya menghasilkan laporan yang serupa, sehingga kita bebas memilih sesuai kondisi. Panel Options menambahkan pilihan tampilan, misalnya menyertakan potongan sumber pada setiap pesan.

Membaca Laporan Validator #

Validator memilah temuan menjadi dua jenis. Error menandai pelanggaran ketentuan yang jelas, sedangkan warning berupa saran yang patut ditinjau tanpa selalu berarti salah. Setiap pesan menyertakan posisi baris dan kolom — misalnya From line 10, column 5 — sehingga kita dapat langsung menuju letaknya. Satu kesalahan sering memicu beberapa pesan berantai, maka perbaiki temuan paling atas terlebih dulu, lalu jalankan validasi ulang sebelum menilai sisanya.

Potongan berikut memuat satu kesalahan penyarangan tag:

<p>Sambutan dari ketua RT <b><i>dibacakan</b></i> pada rapat.</p>

Laporan validator untuk potongan serupa (letak baris menyesuaikan dokumen):

Error: End tag "b" violates nesting rules.

From line 9, column 42; to line 9, column 45

Error: No "i" element in scope but a "i" end tag seen.

From line 9, column 46; to line 9, column 49

Urutan pembacaannya terlihat di sini: pelanggaran penyarangan pada tag b dilaporkan lebih dulu, dan tag penutup i yang tidak menemukan elemen i dalam jangkauannya menyusul sebagai pesan kedua. Perbaikan yang benar menutup i sebelum b, lalu memvalidasi ulang.

Opsi Baris Perintah #

Untuk pemeriksaan rutin di komputer sendiri, checker tersedia sebagai berkas vnu.jar yang dijalankan lewat Java. Perintah paling ringkas memakai opsi --errors-only sehingga hanya error yang dilaporkan, dan beberapa berkas dapat diperiksa sekaligus dalam satu perintah:

java -jar vnu.jar --errors-only halaman-utama.html halaman-kontak.html

Bentuk inilah yang memeriksa setiap contoh pada course ini. Pola yang sama mudah ditanam pada alat otomatis proyek, sehingga markup yang melanggar ketentuan tertangkap sebelum halaman tayang.

Kapan Memvalidasi dan Batasnya #

Kebiasaan yang sehat menempatkan validasi pada tiga momen: sebelum halaman dirilis, ketika perilaku browser terasa aneh, dan setelah perubahan besar pada markup. Perlu ditegaskan, validator memeriksa sintaks, bukan kualitas. Halaman tanpa error belum tentu aksesibel, belum tentu semantik, dan belum tentu nyaman dibaca; halaman yang baik menjadi hasil kerja validator ditambah pemeriksaan aksesibilitas dan penilaian manusia. Halaman about milik checker juga menegaskan posisinya: alat ini adalah checker, bukan mekanisme sertifikasi pass/fail.

Contoh terakhir course ini adalah halaman ringkas yang lolos pemeriksaan — berkas berikut dapat divalidasi ulang oleh kita kapan pun:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Halaman Hasil Validasi</title>
</head>
<body>
  <main>
    <h1>Halaman Hasil Validasi</h1>
    <p>Halaman ini menjadi contoh penutup course: markup sederhana, lolos pemeriksaan, dan siap dibaca.</p>
    <h2>Checklist Sebelum Rilis</h2>
    <ul>
      <li>Doctype, <code>lang</code>, dan <code>meta charset</code> lengkap</li>
      <li>Heading tersusun tanpa lompatan level</li>
      <li>Gambar memakai teks alternatif yang bermakna</li>
      <li>Laporan validator bersih tanpa error</li>
    </ul>
  </main>
</body>
</html>

Output yang Dihasilkan:

Browser menampilkan halaman dengan judul "Halaman Hasil Validasi",
satu paragraf pengantar, dan daftar checklist empat butir di bawah
heading "Checklist Sebelum Rilis".

Mari kita telaah perannya satu per satu:

1. Baris 10 (<h1>): judul halaman yang sejajar dengan isi title pada head.
2. Baris 11 (<p>): paragraf pengantar yang menegaskan posisi halaman sebagai contoh penutup.
3. Baris 12 (<h2>): judul daftar; urutan h1 lalu h2 menjaga hierarki tanpa lompatan.
4. Baris 13-18 (<ul>): empat butir checklist; istilah teknis ditandai elemen code agar terbaca sebagai nama bagian markup.
5. Baris 19-21: penutup main, body, dan html yang menuntaskan dokumen.

Course HTML resmi sampai di sini, namun kebiasaannya justru baru dimulai: setiap contoh yang telah kita tulis diuji dengan validator yang sama, dan kebiasaan itu layak dibawa ke setiap halaman yang akan dirilis kelak. Gabungkan sumber-sumber yang diperkenalkan pada section ini — dokumentasi untuk menemukan cara, spec untuk menegaskan ketentuan, WAI untuk menilai aksesibilitas, dan validator untuk memeriksa hasil — dan setiap halaman baru yang kita tulis menjadi latihan mandiri berikutnya.

Referensi resmi untuk pendalaman:

• W3C — Nu Html Checker
• W3C — About the Nu Html Checker
• MDN Web Docs — Debugging HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Halaman Hasil Validasi</title>
</head>
<body>
  <main>
    <h1>Halaman Hasil Validasi</h1>
    <p>Halaman ini menjadi contoh penutup course: markup sederhana, lolos pemeriksaan, dan siap dibaca.</p>
    <h2>Checklist Sebelum Rilis</h2>
    <ul>
      <li>Doctype, <code>lang</code>, dan <code>meta charset</code> lengkap</li>
      <li>Heading tersusun tanpa lompatan level</li>
      <li>Gambar memakai teks alternatif yang bermakna</li>
      <li>Laporan validator bersih tanpa error</li>
    </ul>
  </main>
</body>
</html>