Checklist HTML

Sebelum halaman diterbitkan, ada satu ritual singkat yang menangkap sebagian besar masalah sebelum pengunjung menemukannya: daftar periksa. Bukan karena kita kurang percaya diri — melainkan karena mata yang menulis kode adalah mata yang sama yang paling mudah melewati kesalahannya. Daftar periksa memaksa pemeriksaan berjalan berurutan dan tanpa pengecualian, dari struktur sampai uji ponsel.

Chapter penutup section ini merangkum seluruh Course menjadi sepuluh pemeriksaan pra-terbit, lalu menunjukkan satu halaman yang lolos semuanya.

Cara Memakai #

Jalankan daftar ini pada setiap halaman baru dan setiap kali perubahan besar disimpan. Waktu yang dibutuhkan sekitar lima menit — bandingkan dengan waktu menelusuri keluhan pengunjung setelah halaman tayang. Cetak daftarnya di kepala: setelah beberapa kali berjalan, pemeriksaan bekerja otomatis dan kita hanya berhenti pada butir yang gagal.

Daftar Periksa Pra-Terbit #

Halaman yang Lolos Semua #

Berikut halaman pesan menu mini yang memenuhi seluruh butir di atas:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu — Kedai Kopi Siti</title>
</head>
<body>
  <h1>Menu Kedai Kopi Siti</h1>
  <figure>
    <img src="kopi-susu.jpg" alt="Segelas kopi susu di atas meja kayu">
    <figcaption>Kopi susu andalan kedai.</figcaption>
  </figure>
  <form action="/pesan" method="post">
    <label for="menu">Pilih menu</label>
    <select id="menu" name="menu">
      <option value="kopi-susu">Kopi susu</option>
    </select>
    <button type="submit">Pesan</button>
  </form>
</body>
</html>

Mari kita telaah butir demi butirnya:

1. Baris 1–2: doctype dan lang="id" memenuhi pemeriksaan struktur pertama.
2. Baris 4–5: charset berada di awal head; viewport menyiapkan tampilan ponsel.
3. Baris 9: satu-satunya h1 pada halaman.
4. Baris 11: alt menggambarkan isi foto, bukan mengulang nama berkas.
5. Baris 15–17: label terhubung lewat for/id; select punya name; option memakai value eksplisit.
6. Baris 18: tombol memakai type eksplisit; sisa butir (validasi, keyboard, ponsel) diuji di browser, bukan di markup.

Tujuh butir pertama bisa diperiksa langsung dari markup seperti di atas; tiga butir terakhir berjalan di browser dan validator — proses yang tidak bisa diwakili demo render dalam halaman ini. Simpan halaman di atas sebagai berkas, lalu jalankan kesepuluh pemeriksaannya sendiri: itulah cara daftar periksa benar-benar dipakai.

Sepuluh pemeriksaan ini menutup Section Validasi dan Debugging. Section berikutnya, Praktik HTML, mengajak kita memakai seluruh bekal Course pada pola-pola halaman nyata.