Setiap berkas HTML yang pernah dibuka lewat fitur view source pasti pernah menampilkan komentar: <!-- teks di dalam sini -->. Elemen ini tidak dirender sama sekali — browser melewatinya begitu saja. Justru karena gratis dan tak terlihat, komentar mudah dipakai berlebihan: menandai yang sudah jelas, menyimpan catatan pinggir, sampai menuliskan riwayat suntingan utuh.

Chapter ini menetapkan tiga pemakaian yang benar-benar membantu, lalu menandai pemakaian yang menumpuk. Aturan emasnya satu kalimat: komentar menjelaskan mengapa, bukan apa.

Tiga Pemakaian yang Membantu #

Komentar HTML ditulis di antara <!-- dan -->. Mekanismenya: parser melewati seluruh isi komentar sampai penutup ditemukan — apa pun isinya, tidak masuk pohon DOM dan tidak dirender. Ada tiga situasi yang layak memakai keistimewaan itu:

  1. Penanda bagian besar — menandai batas header, main, footer supaya lompatan antarwilayah di berkas panjang lebih cepat.
  2. TODO — pekerjaan yang sadar belum selesai, misalnya menunggu data dari sistem kasir.
  3. Keputusan non-obvious — alasan di balik markup yang akan membingungkan pembaca berikutnya, termasuk diri sendiri.

Berikut ketiganya dalam satu contoh dari halaman depan Kedai Kopi Siti:

html 
<!-- ===== header situs: identik di semua halaman ===== -->
<header>
  <a href="index.html">Kedai Kopi Siti</a>
</header>

<main>
  <!-- TODO: tarik daftar menu dari sistem kasir Siti saat tersedia -->
  <section>
    <h2>Menu Favorit</h2>
    <p>Kopi susu gula aren dan es kopi tubruk.</p>
  </section>
</main>

<!-- Jam buka 07.00-21.00; nilai ini juga dipakai halaman kontak -->
<footer>
  <p>Buka setiap hari 07.00–21.00</p>
</footer>

Mari kita bedah:

  1. Komentar header (baris 1): penanda bagian — pembaca yang mencari main tahu harus melewati blok mana; pola ===== ... ===== sekadar memudahkan pencarian.
  2. Komentar TODO (baris 8): menandai pekerjaan tertunda dengan kata kunci yang mudah dicari — satu pencarian TODO menemukan semuanya di seluruh proyek.
  3. Komentar jam buka (baris 15): menjelaskan mengapa nilainya penting — informasi yang tidak mungkin diketahui dari markupnya saja; inilah komentar dengan nilai terbesar.
  4. Seluruh isi komentar tidak masuk DOM: halaman yang dirender persis sama dengan versi tanpa komentar.

Karena komentar tidak pernah tampil di area halaman, demo render di sini tidak akan memperlihatkan apa pun — halaman dengan dan tanpa komentar menghasilkan tampilan yang persis sama. Untuk melihat komentarnya, buka view source (Ctrl+U) pada berkas yang memuat contoh di atas: seluruh komentar tetap utuh di kode, persis seperti ditulis.

Kapan Tidak Berkomentar #

Kebalikannya sama penting. Jangan berkomentar untuk menyatakan yang sudah jelas dari kodenya sendiri — <!-- paragraf pembuka --> di atas sebuah p hanya mengulangi yang dilihat mata. Jangan pula menyimpan riwayat perubahan di komentar; daftar “dulu begini, kemudian begitu” makin panjang setiap suntingan dan tidak pernah dibaca siapa pun.

html 
<!-- mulai paragraf -->
<p>Espresso kami memakai biji Gayo.</p>
<!-- selesai paragraf -->
<!-- 2 Nov: ganti "Arabika" jadi "Gayo" -->
<!-- 3 Nov: perbaiki ejaan oleh Dewi -->

Hasil render blok di atas: satu paragraf biasa — empat komentarnya tidak berbuat apa-apa selain menambah panjang berkas. Bedah singkat: dua komentar pertama mengulangi struktur yang sudah terbaca dari p; dua berikutnya adalah riwayat suntingan yang tempatnya bukan di sini.

Ringkasan #

  • Tiga pemakaian tepat: penanda bagian besar, TODO, dan penjelasan keputusan non-obvious.
  • Aturan emas: komentar menjelaskan mengapa, bukan apa — kode sudah menjelaskan apa.
  • Riwayat perubahan diserahkan ke Git; dan ingat, komentar terbaca publik lewat view source.

Dengan markup yang ramping dan terbaca, tinggal satu urusan besar: berkas non-HTML. Chapter berikutnya membahas pengelolaan assets.