Komentar dan Best Practice Penulisan HTML

Komentar di HTML

Komentar adalah catatan untuk manusia yang diabaikan browser. Sintaksnya:

<!-- Ini komentar, tidak tampil di halaman -->

<p>Teks ini tampil.</p>
<!-- <p>Teks ini disembunyikan sementara.</p> -->

Komentar berguna untuk menandai bagian besar ("di sini mulai footer"), menjelaskan kode yang tidak jelas, atau menonaktifkan sementara blok kode saat debugging.

Catatan teknis: Komentar bisa dilihat siapa pun lewat View Source (klik kanan, View Page Source). Jangan pernah taruh password, API key, atau info rahasia di komentar HTML. Ini kesalahan klasik yang datanya bocor ke publik.

Komentar Bersarang Itu Tidak Bisa

Hati-hati: komentar HTML tidak bisa bersarang. Ini rusak:

<!-- luar <!-- dalam --> masih dianggap komentar? -->

Browser menutup komentar di --> pertama, sehingga sisanya dianggap teks biasa dan tampil di halaman. Kalau mau menonaktifkan blok yang sudah berisi komentar, hapus komentar dalamnya dulu.

Best Practice 1: Indentasi Konsisten

Elemen anak menjorok ke dalam dari induknya. Ini bikin hierarki terlihat sekilas:

<!-- Baik -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Buruk: susah lihat struktur -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Pakai 2 spasi per level, konsisten di seluruh file.

Best Practice 2: Selalu Tutup Tag

Secara teknis beberapa tag boleh tidak ditutup (<p>, <li>), tapi jangan biasakan. Selalu tutup:

<!-- Baik -->
<li>Satu</li>
<li>Dua</li>

<!-- Buruk: rawan bug saat kode bertambah -->
<li>Satu
<li>Dua

Best Practice 3: Huruf Kecil dan Tanda Kutip

<!-- Baik -->
<img src="foto.jpg" alt="Foto">

<!-- Buruk -->
<IMG SRC=foto.jpg ALT=Foto>

Nama tag dan atribut selalu huruf kecil, nilai atribut selalu dalam tanda kutip ganda. Memang jalan juga tanpa kutip untuk nilai sederhana, tapi pecah begitu nilainya mengandung spasi.

Best Practice 4: Jangan Mengulang id

Atribut id harus unik satu halaman. Kalau butuh penanda yang dipakai banyak elemen, pakai class:

<!-- Buruk: id kembar -->
<p id="info">Satu</p>
<p id="info">Dua</p>

<!-- Baik -->
<p class="info">Satu</p>
<p class="info">Dua</p>

Best Practice 5: Spasi di Sekitar Inline Element

Hati-hati dengan <br> dan spasi antar elemen inline. Dua contoh ini hasilnya beda:

<p>Harga: <strong>50rb</strong></p>
<p>Harga:<strong>50rb</strong></p>

Yang kedua tampil "Harga:50rb" tanpa spasi. Browser collapse whitespace, jadi pastikan spasi yang kamu mau memang ada di kode.

Checklist Sebelum Selesai

• Semua tag ditutup dengan benar
• Indentasi rapi dan konsisten
• Setiap input punya label
• Setiap gambar punya alt
• Tidak ada id yang kembar
• Tidak ada info rahasia di komentar

Kode yang rapi bukan soal gaya: kode rapi lebih gampang di-debug, lebih gampang dibaca orang lain, dan lebih sedikit bug misterius.