HTML Validator

Sebuah halaman dapat terlihat baik-baik saja meski markupnya tidak sesuai aturan HTML: browser memaafkan kesalahan dan menyusun ulang dokumen agar tetap tampil. Kelonggaran ini nyaman sehari-hari, tetapi kesalahan kecil dapat menumpuk sampai struktur bergeser. HTML validator memberi pemeriksaan objektif dengan membandingkan dokumen terhadap aturan resmi HTML. Chapter ini memperkenalkan validator W3C, tiga cara memeriksa dokumen, alur memvalidasi satu file, serta batasan pemeriksaannya.

Apa itu HTML Validator #

HTML validator adalah conformance checker — pemeriksa kesesuaian — yang menelaah dokumen terhadap aturan HTML Living Standard. Validator yang kita pakai adalah Nu Html Checker, mesin resmi di balik layanan validator.w3.org/nu/ milik W3C. Mesin yang sama dibagikan sebagai program baris perintah bernama vnu.jar, sehingga pemeriksaan dapat berjalan di komputer lokal.

Browser tidak membandingkan dokumen dengan aturan: browser hanya berupaya menampilkan apa pun yang diterimanya. Validator bekerja sebaliknya — tugasnya menemukan penyimpangan dari aturan, lalu melaporkannya lengkap dengan nomor baris dan kolomnya.

Tiga Cara Memeriksa Dokumen #

Halaman validator.w3.org/nu/ menyediakan tiga tab pemeriksaan dengan mesin yang sama; hasilnya identik, yang membedakan hanyalah asal dokumennya.

Memvalidasi Satu File #

Mari kita lewati alurnya bersama file berita kecil berikut, diperiksa lewat tab File Upload: pilih file, tekan tombol pemeriksa, lalu laporan tampil di bagian bawah halaman.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Warta Melati — Edisi 12 Mei</title>
</head>
<body>
  <header>
    <h1>Warta Melati</h1>
    <p>Buletin warga Kelurahan Melati, edisi 12 Mei.</p>
  </header>
  <main>
    <article>
      <h2>Bazar Sembako Mingguan Kembali Digelar</h2>
      <p>
        Pasar Melati kembali menggelar bazar sembako setiap Minggu pagi
        di lapangan utama dengan harga terjangkau bagi seluruh warga.
      </p>
    </article>
    <article>
      <h2>Posyandu Balita Pindah ke Balai Warga</h2>
      <p>
        Kegiatan posyandu bulanan pindah sementara ke balai warga selama
        aula puskesmas menjalani renovasi.
      </p>
    </article>
  </main>
  <footer>
    <p>Suntingan pekan ini: Siti dari Redaksi Warta Melati.</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kepala situs "Warta Melati" dengan dua artikel di bawahnya
  - Catatan suntingan di dalam footer
Laporan validator:
  - Dokumen lolos tanpa error maupun warning

1. Baris 1-6 (fondasi): doctype, html lang="id", meta charset, viewport, dan title — kelima bagian ini selalu hadir pada dokumen valid.
2. Baris 9-12 (header): kepala halaman berisi h1 dan satu paragraf perkenalan.
3. Baris 13-27 (main): konten utama berisi dua article, masing-masing dengan heading h2 dan paragraf.
4. Baris 29-31 (footer): penutup halaman dengan catatan suntingan.

Sekarang bandingkan dengan versi yang memuat satu kesalahan kecil — atribut alt pada img tidak ditulis:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Bazar Sembako</title>
</head>
<body>
  <article>
    <h2>Bazar Sembako Digelar</h2>
    <p>Bazar kembali digelar Minggu pagi di lapangan utama.</p>
    <img src="bazar-sembako.jpg">
  </article>
</body>
</html>

Error: An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
From line 11, column 5; to line 11, column 33
Warning: This document has heading elements but none of them has a computed heading level of 1.
From line 9, column 5; to line 9, column 8
Document checking completed.

Pesan Error menunjuk baris 11: aturan HTML mensyaratkan alt pada img, sehingga dokumen ini belum valid. Pesan Warning berbeda sifat — dokumen masih sah, tetapi halamannya memakai heading tanpa satu pun h1. Perbedaan keduanya kita bedah tuntas pada chapter berikutnya.

Validator dari Baris Perintah #

Mesin yang sama dapat berjalan tanpa browser: vnu.jar, program Java yang menerima nama file dan mencetak temuan langsung ke terminal:

java -jar vnu.jar halaman-berita.html

Dokumen yang lolos tidak mencetak apa pun dan perintah berakhir dengan kode keluar 0 — sinyal yang mudah dibaca alat otomatis. Bila ada temuan, setiap baris laporan memuat lokasi dalam format baris.kolom, seperti:

"bazar-sembako.html":11.5-11.33: error: An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Opsi --errors-only menyaring laporan menjadi error saja, dan mode server memungkinkan tim memeriksa banyak halaman dari browser. Untuk keperluan belajar saat ini, tab web dan pemeriksaan file tunggal sepenuhnya memadai.

Yang Diperiksa dan yang Tidak #

Pemeriksaan validator mencakup:

• Sintaks: tag tak ditutup, penutup tanpa pembuka, penulisan atribut yang keliru.
• Struktur: susunan induk-anak sesuai content model, misalnya li harus di dalam ul atau ol.
• Atribut wajib: atribut yang disyaratkan aturan, seperti alt pada img.
• Nilai unik: id yang berulang pada satu dokumen.
• Konstruksi usang: elemen center atau atribut align yang tak lagi bagian standar.
• Fondasi dokumen: doctype yang hilang atau salah.

Yang berada di luar jangkauan validator:

• Tampilan: validator tidak menilai halaman menarik atau tidak.
• Perilaku: kerja skrip, interaksi, dan pengiriman form ke server.
• Kebenaran isi: teks yang keliru tetap lolos selama markupnya sah.
• Aksesibilitas menyeluruh: sebagian aspek tersentuh (alt, hubungan label), sisanya butuh pemeriksaan tersendiri.

Dengan validator, kualitas markup punya ukuran objektif: lolos atau tidak, lengkap dengan lokasi temuan. Langkah berikutnya adalah membaca laporannya dengan lancar — pesan validator punya format dan pola yang dapat kita pelajari, dan itulah isi chapter berikutnya.

Referensi resmi untuk pendalaman:

• W3C — Nu Html Checker
• WHATWG — HTML Living Standard: The HTML syntax
• MDN Web Docs — HTML elements reference

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Warta Melati — Edisi 12 Mei</title>
</head>
<body>
  <header>
    <h1>Warta Melati</h1>
    <p>Buletin warga Kelurahan Melati, edisi 12 Mei.</p>
  </header>
  <main>
    <article>
      <h2>Bazar Sembako Mingguan Kembali Digelar</h2>
      <p>
        Pasar Melati kembali menggelar bazar sembako setiap Minggu pagi
        di lapangan utama dengan harga terjangkau bagi seluruh warga.
      </p>
    </article>
    <article>
      <h2>Posyandu Balita Pindah ke Balai Warga</h2>
      <p>
        Kegiatan posyandu bulanan pindah sementara ke balai warga selama
        aula puskesmas menjalani renovasi.
      </p>
    </article>
  </main>
  <footer>
    <p>Suntingan pekan ini: Siti dari Redaksi Warta Melati.</p>
  </footer>
</body>
</html>