Tutorial HTML / Menemukan kesalahan dan memvalidasi dokumen HTML

Validasi HTML membantu menemukan kesalahan markup yang dapat diperbaiki diam-diam oleh browser, seperti atribut yang diformat salah, tag penutup yang tidak terduga, atau ID ganda. Setelah masalah yang dilaporkan diperbaiki, Anda harus selalu memeriksa konten dan interaksi aktual halaman di browser.

Simpan halaman dan periksa terlebih dahulu

Simpan file HTML saat ini dan buka di browser. Periksa apakah judul, paragraf, tautan, gambar, dan formulir muncul di tempat yang Anda harapkan. Halaman yang terlihat tidak merupakan bukti bahwa penandaannya valid: Browser dapat memperbaiki kesalahan tertentu dan menampilkan hasil yang berbeda dari struktur yang Anda rencanakan.

Jalankan Nu HTML Checker

Pemeriksa HTML Nu dapat memeriksa URL publik, file yang diunggah, atau markup yang disisipkan. Untuk dokumen lokal atau yang belum dipublikasikan, gunakan unggahan file atau masukan langsung. Jangan mengunggah file sumber dengan kata sandi atau data pribadi ke layanan validasi publik. Aturan tag dan atribut yang saat ini divalidasi diperkenalkan dalam Sintaks HTML.

1. Simpan versi terbaru dari file HTML.
2. Pilih metode input yang sesuai dan mulai pemeriksaan.
3. Baca setiap pesan dan periksa lokasi yang dilaporkan serta tag pembuka dan penutup di sekitarnya.
4. Perbaiki file, simpan, lalu mulai ulang pemeriksaan.

Mulailah dengan kesalahan pertama yang dilaporkan jika ada beberapa pesan. Satu atribut yang salah format saja dapat menyebabkan beberapa pesan berikutnya. Baris tempat kesalahan terdeteksi tidak harus baris yang menyebabkannya; misalnya, tanda kutip yang tidak ditutup dapat membuat tag berikutnya tampak tidak valid. Pastikan Anda mengunggah revisi yang telah disimpan, bukannya memvalidasi file lama berulang kali.

Sebagai contoh, kode ini mengulangi id:

<label for="email">Email</label>
<input id="email" name="email" type="email">
<label for="email">Konfirmasi email</label>
<input id="email" name="email_check" type="email">

Ubah ID dari bidang kedua menjadi email-check dan perbarui atribut for pada label agar sesuai. Kemudian periksa bahwa kesalahan ID ganda sudah hilang dan bahwa setiap label mengarahkan fokus ke bidangnya sendiri. Tidak adanya tag penutup tidak selalu merupakan kesalahan: Beberapa elemen, termasuk li dalam konteks tertentu, dapat melewatkan tag penutupnya sesuai dengan aturan HTML.

Pemeriksaan contoh lengkap dengan Nu HTML Checker telah mengembalikan Duplicate ID “email”. untuk dokumen yang bermasalah dan tidak ada kesalahan untuk perbaikannya. Bandingkan interaksi label secara terpisah; diagnosis tambahan dapat bervariasi dengan pembaruan pemeriksa atau tergantung pada konten berkas.

Bandingkan dokumen yang salah dengan koreksinya

Latihan validasi berikut sengaja mengulangi sebuah ID. Simpan sebagai invalid.html dan periksa menggunakan mode input teks atau unggah file dari Nu HTML Validator. Ini adalah kasus uji yang gagal dan bukan kode yang bisa langsung digunakan.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan validasi dokumen</title>
</head>
<body>
  <h1>Latihan validasi label</h1>
  <form method="get">
    <p><label for="email">Email</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">Konfirmasi email</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Periksa nilai yang dimasukkan</button>
  </form>
</body>
</html>

Temukan diagnosa penggunaan email dua kali sebagai ID. Browser masih bisa menampilkan dua kolom, tetapi ID ganda mencegah setiap label dikaitkan secara unik dengan kolomnya. Dokumen yang diperbaiki mengubah kolom kedua dan target label menjadi email-check.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan validasi dokumen</title>
</head>
<body>
  <h1>Latihan validasi label</h1>
  <form method="get">
    <p><label for="email">Email</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">Konfirmasi email</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Periksa nilai yang dimasukkan</button>
  </form>
</body>
</html>

1. Simpan koreksi sebagai valid.html dan validasikan file terakhir, bukan salinan sebelumnya.
2. Klik setiap label dan bandingkan kotak input mana yang mendapatkan fokus. Jika Anda mengubah ID tanpa memperbarui atribut for, pemetaan tetap salah.
3. Setelah diagnosis diperbaiki, selalu uji tujuan, konten, dan penggunaan keyboard. Simpan hasil untuk sintaks dan kemudahan penggunaan secara terpisah.

Jangan bingung antara contoh yang sengaja gagal dengan format yang salah di artikel itu sendiri. Sebuah blok kode dapat menunjukkan string yang menghasilkan kesalahan; dokumen validasi adalah dokumen mandiri yang dibuat dari contoh ini.

Validasi hanyalah salah satu cara pemeriksaan

Seorang pemeriksa sintaks tidak dapat menjamin bahwa sebuah tautan mengarah ke artikel yang benar, bahwa teks alternatif menggambarkan gambar dengan benar, atau bahwa server memproses formulir dengan benar. Buka tautan, gunakan halaman dengan keyboard, dan periksa jendela tampilan yang sempit. Jika media hilang, periksa jalur, respons server, format yang didukung, serta penandaan. Terapkan baik pemeriksaan sintaks maupun pengujian navigasi nyata dalam Membuat situs web kecil multi-halaman.

Pastikan Anda mengetahui apa yang telah diperiksa: unggahan file memeriksa file, sedangkan pemeriksaan URL memeriksa dokumen yang benar-benar dikembalikan oleh server. Di WordPress, sebuah tema membungkus isi artikel, oleh karena itu memeriksa fragmen naskah dan memeriksa halaman yang dipublikasikan sepenuhnya dapat menghasilkan hasil yang berbeda. Pisahkan masalah dalam artikel dari masalah yang diperkenalkan oleh tema atau plugin.