Memahami Validation Errors

Laporan validator pertama biasanya menghadirkan lebih banyak pesan daripada dugaan: satu dokumen bermasalah dapat memunculkan sepuluh temuan sekaligus. Pesan validator mengikuti format yang tetap dan pola kesalahannya berulang. Setelah formatnya akrab, membaca laporan menjadi keterampilan rutin, bukan tebak-tebakan. Chapter ini melatih pembacaan laporan: arti error dan warning, pesan yang sering muncul, serta urutan menindaklanjutinya.

Format Pesan Validator #

Setiap temuan terdiri atas tiga bagian: jenis temuan, teks pesan, dan lokasi. Jenis temuan menyatakan Error atau Warning, teks pesan menjelaskan penyimpangannya, dan lokasi berupa From line X, column Y; to line A, column B yang menunjuk rentang karakter pada file sumber. Baris dihitung sejak baris pertama file — baris 1 adalah posisi doctype — dan kolom dihitung per karakter sejak awal baris.

Error dan Warning #

Error adalah pelanggaran aturan yang pasti: content model yang dilanggar, id yang berulang, elemen usang, atau doctype yang hilang. Error wajib diperbaiki sebelum dokumen disebut valid. Warning berbeda sifatnya — dokumen masih sah, tetapi validator melihat hal yang patut ditinjau:

• The first occurrence of ID “info” was here. — menunjuk lokasi pertama sebuah id dipakai; pendamping pesan Duplicate ID.
• This document has heading elements but none of them has a computed heading level of 1. — dokumen memakai heading tetapi tidak punya h1.
• Section lacks heading. — elemen section tanpa heading pembeda.

Dokumen dengan warning tetap sah; perlakukan warning sebagai keputusan: boleh dibiarkan bila disengaja, tetapi tiap warning harus punya alasan yang dipahami.

Laporan pada Dokumen Bermasalah #

Perhatikan file berikut yang memuat empat jenis kesalahan sekaligus, lalu periksa lewat tab Text Input:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Jadwal Acara</title>
</head>
<body>
  <ul>
    <h2>Kerja bakti</h2>
    <li>Setiap Minggu pagi di lapangan utama.</li>
  </ul>
  <section id="jadwal-tambahan">
    <p>Acara tambahan menyusul.</p>
  </section>
  <section id="jadwal-tambahan">
    <p>Pendaftaran dibuka sore ini.</p>
  </section>
  <div class="papan">
    <p>Pengumuman penuh ditempel di muka balai warga.</p>
</body>
</html>

Laporannya memuat empat error dan beberapa warning:

Error: Element “h2” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.)
From line 9, column 5; to line 9, column 8
Warning: Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections, or else use a “div” element instead for any cases where no heading is needed.
From line 12, column 3; to line 12, column 32
Error: Duplicate ID “jadwal-tambahan”.
From line 15, column 3; to line 15, column 32
Warning: The first occurrence of ID “jadwal-tambahan” was here.
From line 12, column 3; to line 12, column 32
Error: End tag for  “body” seen, but there were unclosed elements.
From line 20, column 1; to line 20, column 7
Error: Unclosed element “div”.
From line 18, column 3; to line 18, column 21
Document checking completed.

Empat error berasal dari empat penyebab berbeda; penanganannya tetap berurutan, mulai dari pesan teratas. Pesan pertama — h2 di dalam ul pada baris 9 — adalah titik mulai yang tepat. Frasa (Suppressing further errors from this subtree.) menyatakan validator berhenti melaporkan kesalahan lain di bagian itu: satu penyebab dapat menyembunyikan temuan berikutnya, sehingga satu perbaikan kadang mengubah banyak pesan sekaligus.

Arah penunjukan pada pasangan terakhir juga penting. End tag for “body” seen melaporkan baris 20, sedangkan Unclosed element “div” menunjuk baris 18: untuk elemen yang tidak ditutup, pesan menunjuk posisi tag pembukanya, bukan tempat dokumen putus. Error Duplicate ID menunjuk kejadian kedua pada baris 15; warning-nya menunjuk kejadian pertama pada baris 12.

Pesan Umum dan Solusinya #

Tabel berikut merangkum pesan yang sering muncul (dikutip ringkas):

Memperbaiki dari Temuan Pertama #

Kita benahi file itu satu per satu: heading dipindah keluar daftar, id kedua dibuat unik, dan div yang menggantung ditutup. Hasil perbaikannya adalah file berikut:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Acara Rutin Pos RW 5</title>
</head>
<body>
  <main>
    <h1>Jadwal Acara Rutin Pos RW 5</h1>
    <ul>
      <li>
        <h2>Kerja bakti</h2>
        <p>Setiap Minggu pagi di lapangan utama.</p>
      </li>
      <li>
        <h2>Posyandu</h2>
        <p>Setiap Selasa pagi di balai warga.</p>
      </li>
    </ul>
    <section id="jadwal-tambahan">
      <h2>Acara Tambahan</h2>
      <p>Pengumuman menyusul di papan muka balai warga.</p>
    </section>
  </main>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Daftar dua acara, masing-masing bertajuk "Kerja bakti" dan "Posyandu"
  - Bagian "Acara Tambahan" di bawah daftar
Laporan validator:
  - Tanpa error maupun warning

1. Baris 11-20 (ul): setiap butir memuat heading h2 dan paragrafnya di dalam li, sesuai content model.
2. Baris 21-24 (section): satu-satunya section, dengan id unik dan heading h2 — pesan Duplicate ID dan Section lacks heading hilang.
3. Baris 10 (h1): heading level 1 hadir, sehingga warning dokumen tanpa h1 juga hilang.
4. Baris 24-25: section ditutup sebelum main, main sebelum body — tak ada elemen menggantung.

Alurnya kini tertib: mulai dari pesan pertama, perbaiki, lalu periksa ulang. Setelah dokumen valid, urusan berikutnya adalah menjaga file tetap nyaman dibaca manusia — topik chapter berikutnya.

Referensi resmi untuk pendalaman:

• WHATWG — HTML Living Standard: Parse errors
• W3C — Nu Html Checker
• MDN Web Docs — Global attribute id

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Acara Rutin Pos RW 5</title>
</head>
<body>
  <main>
    <h1>Jadwal Acara Rutin Pos RW 5</h1>
    <ul>
      <li>
        <h2>Kerja bakti</h2>
        <p>Setiap Minggu pagi di lapangan utama.</p>
      </li>
      <li>
        <h2>Posyandu</h2>
        <p>Setiap Selasa pagi di balai warga.</p>
      </li>
    </ul>
    <section id="jadwal-tambahan">
      <h2>Acara Tambahan</h2>
      <p>Pengumuman menyusul di papan muka balai warga.</p>
    </section>
  </main>
</body>
</html>