Course HTML telah menempuh jalan panjang: struktur dokumen, elemen dan atribut, teks, link, gambar, daftar, tabel, semantik, form, validasi form, metadata, hingga accessibility. Pengetahuan yang tersebar sepanjang jalan itu mudah terlewat satu-dua butirnya saat kita sibuk menulis halaman nyata. Checklist mengubah ingatan menjadi rutinitas: satu daftar pendek yang dilalui sebelum halaman dinyatakan siap. Chapter ini merangkum seluruh course ke dalam checklist tersebut, lengkap dengan rujukan bab sumbernya.

Checklist Sebelum Halaman Terbit #

Lalui butir-butir berikut pada setiap halaman yang ditulis:

  • Fondasi dokumen — <!doctype html>, <html lang="id">, meta charset, dan viewport berada di posisi semestinya (section Struktur Dokumen dan Metadata dan SEO).
  • Judul dan deskripsi — title unik dan deskriptif untuk setiap halaman, ditambah meta description yang menggambarkan isinya (section Metadata dan SEO).
  • Heading hierarkis — satu h1 per halaman, tingkat heading tidak melompat, dan setiap section punya heading pembeda (section Teks dan Formatting serta Accessibility).
  • Struktur semantik — konten utama berada di dalam main, pembagian memakai article, section, aside, dan nav — bukan tumpukan div (section Semantic HTML).
  • Gambar — setiap img punya alt bermakna; gambar dekoratif memakai alt="" (section Images dan Media serta Accessibility).
  • Form — setiap kontrol terikat label, dan atribut validasi seperti required menemani aturan isian (section Forms, Form Validation, dan Accessibility).
  • Navigasi keyboard — link, tombol, dan kontrol form dapat dicapai serta dioperasikan tanpa tetikus; ARIA dipakai hanya bila elemen bawaan tak memadai (section Accessibility).
  • Kualitas markup — dokumen lolos validator tanpa error, dan warning tersisa punya alasan yang disengaja (section ini).
  • Formatting dan konsistensi — indentasi teratur, penamaan class seragam, kutip dan urutan atribut konsisten (section ini).
  • Kontras warna — disebut di sini sebagai pengingat: pemeriksaan kontras penuh menunggu materi CSS pada section HTML dan CSS yang menyusul.

Cara Memakai Checklist #

Checklist paling berguna saat dipakai dua kali: sekali saat menulis — banyak butir di atas adalah kebiasaan menulis, bukan langkah akhir — dan sekali sebelum halaman tayang. Dua pemeriksaan cepat menutup putarannya: buka halaman di browser untuk merasakannya sebagai pengunjung, lalu jalankan validator untuk memastikan ukuran teknisnya. Bila salah satu butir gagal, prosedur debugging pada chapter sebelumnya menunjuk jalur perbaikannya.

Checklist juga boleh tumbuh bersama tim. Pola kesalahan yang kerap ditemukan ditambahkan sebagai butir baru, sementara keputusan rinci seperti pola penamaan disimpan dalam style guide dari chapter Konsistensi Markup. Jaga daftarnya tetap pendek agar seluruhnya benar-benar dilalui.

Halaman yang Lolos Semua Butir #

File berikut merangkum hampir seluruh butir checklist dalam satu halaman profil kecil — struktur semantik, metadata lengkap, gambar ber-alt, dan form berlabel, semuanya dalam markup yang lolos validator:

html halaman-final.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Halaman Profil Budi Santoso</title>
  <meta name="description" content="Profil singkat Budi Santoso: pekerjaan, keahlian, dan cara menghubunginya.">
</head>
<body>
  <header>
    <h1>Budi Santoso</h1>
    <p>Penulis dokumentasi teknis yang tinggal di Bandung.</p>
  </header>
  <nav aria-label="Navigasi utama">
    <ul>
      <li><a href="#tentang">Tentang</a></li>
      <li><a href="#kontak">Kontak</a></li>
    </ul>
  </nav>
  <main>
    <section id="tentang">
      <h2>Tentang</h2>
      <p>Budi menulis panduan penggunaan perangkat lunak sejak tahun 2019.</p>
      <img src="foto-budi.jpg" alt="Potret Budi Santoso mengenakan kemeja biru" width="240" height="240">
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <form action="/kontak" method="post">
        <p>
          <label for="email">Alamat email</label>
          <input type="email" id="email" name="email" required>
        </p>
        <p>
          <label for="pesan">Pesan</label>
          <textarea id="pesan" name="pesan" rows="4" cols="40" required></textarea>
        </p>
        <p>
          <button type="submit">Kirim pesan</button>
        </p>
      </form>
    </section>
  </main>
  <footer>
    <p>Profil ini disunting Siti pekan ini. Hubungi Budi lewat email [email protected].</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Kepala halaman dengan nama Budi Santoso dan navigasi dua tautan
  - Bagian "Tentang" dengan foto, lalu bagian "Kontak" berisi form email dan pesan
  - Tab browser bertuliskan "Halaman Profil Budi Santoso"
  1. Baris 1-7 (head): fondasi lengkap — doctype, lang="id", charset, viewport, title unik, dan meta description.
  2. Baris 14-19 (nav): navigasi diberi aria-label dan berisi dua tautan internal yang menunjuk id setiap section.
  3. Baris 21-25 (section Tentang): heading h2 di bawah h1 tanpa lompatan, dan img membawa alt deskriptif.
  4. Baris 28-40 (form): label terikat for/id untuk email dan pesan, textarea ditutup rapat, dan tombol submit menutup form.
  5. Baris 43-45 (footer): penutup halaman dengan kontak — struktur utuh terbaca sebagai satu kesatuan semantik.

Dengan checklist ini, section Validation dan Code Quality menutup rangkaian materi inti course HTML. Dua section pendamping masih menunggu di depan — HTML dan CSS untuk tampilan dan HTML dan JavaScript untuk perilaku — dan keduanya akan menempel pada struktur yang kualitasnya telah kita jaga sejak chapter pertama. Setelah itu, section Proyek menyediakan tempat menyatukan semuanya: serangkaian proyek dari halaman profil hingga landing page, yang masing-masing meminta kita menyusun halaman penuh dari nol dengan standar checklist di atas. Sampai tiba di sana, jalani setiap latihan dengan checklist di tangan dan validator sebagai pemeriksa teknisnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

halaman-final.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Halaman Profil Budi Santoso</title>
  <meta name="description" content="Profil singkat Budi Santoso: pekerjaan, keahlian, dan cara menghubunginya.">
</head>
<body>
  <header>
    <h1>Budi Santoso</h1>
    <p>Penulis dokumentasi teknis yang tinggal di Bandung.</p>
  </header>
  <nav aria-label="Navigasi utama">
    <ul>
      <li><a href="#tentang">Tentang</a></li>
      <li><a href="#kontak">Kontak</a></li>
    </ul>
  </nav>
  <main>
    <section id="tentang">
      <h2>Tentang</h2>
      <p>Budi menulis panduan penggunaan perangkat lunak sejak tahun 2019.</p>
      <img src="foto-budi.jpg" alt="Potret Budi Santoso mengenakan kemeja biru" width="240" height="240">
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <form action="/kontak" method="post">
        <p>
          <label for="email">Alamat email</label>
          <input type="email" id="email" name="email" required>
        </p>
        <p>
          <label for="pesan">Pesan</label>
          <textarea id="pesan" name="pesan" rows="4" cols="40" required></textarea>
        </p>
        <p>
          <button type="submit">Kirim pesan</button>
        </p>
      </form>
    </section>
  </main>
  <footer>
    <p>Profil ini disunting Siti pekan ini. Hubungi Budi lewat email [email protected].</p>
  </footer>
</body>
</html>