Langsung ke konten

Comment di HTML: Cara Menulis Komentar dalam Kode

Pelajari cara menulis komentar di HTML menggunakan <!-- -->. Pahami kapan dan mengapa menggunakan comment untuk dokumentasi kode.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami text formatting, saatnya kita belajar membuat komentar di HTML — fitur sederhana tapi sangat berguna untuk menjaga kode tetap rapi dan mudah dipahami.

Apa itu Comment?

Comment (komentar) adalah teks yang ditulis di dalam kode HTML tapi tidak ditampilkan oleh browser. Comment hanya bisa dilihat oleh orang yang membuka source code halaman web.

Comment berfungsi sebagai catatan atau penjelasan bagi programmer — baik untuk diri sendiri maupun tim yang bekerja bersama.

Syntax Comment di HTML

Comment di HTML ditulis dengan membungkus teks di antara <!-- dan -->:

<!-- Ini adalah komentar -->
<p>Paragraf ini akan ditampilkan.</p>
<!-- Komentar ini tidak akan muncul di browser -->

Browser akan mengabaikan semua teks di dalam tanda comment. Hanya kode di luar comment yang akan ditampilkan.

Kapan Menggunakan Comment?

1. Menjelaskan Kode yang Rumit

Ketika kode sudah mulai panjang dan kompleks, comment membantu menjelaskan tujuan dari setiap bagian:

<!-- Bagian Header -->
<header>
  <h1>Nama Website</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/about">Tentang</a>
  </nav>
</header>

<!-- Bagian Konten Utama -->
<main>
  <article>
    <h2>Judul Artikel</h2>
    <p>Isi artikel di sini...</p>
  </article>
</main>

<!-- Bagian Footer -->
<footer>
  <p>&copy; 2026 Nama Website</p>
</footer>

2. Menonaktifkan Sementara Kode

Kadang kamu perlu menjalankan kode tertentu tanpa menghapusnya. Comment bisa digunakan untuk “mematikan” kode sementara:

<!-- <p>Paragraf ini sedang tidak ditampilkan</p> -->
<p>Paragraf ini aktif dan ditampilkan.</p>

Trik ini sangat berguna saat debugging — mencari tahu bagian kode mana yang menyebabkan masalah.

3. Menandai Bagian yang Perlu Diperbaiki

Comment bisa digunakan untuk menandai kode yang masih perlu dikerjakan:

<!-- TODO: Tambahkan form kontak di sini -->
<!-- FIXME: Gambar belum muncul di mobile -->
<!-- HACK: Sementara gunakan fixed width, ganti ke responsive nanti -->

4. Catatan untuk Tim

Jika kamu bekerja dalam tim, comment membantu menyampaikan informasi kepada rekan kerja:

<!-- Diperbarui oleh Budi pada 1 September 2026 -->
<!-- Bagian ini sudah sesuai dengan desain dari UI/UX team -->

Comment Baris Tunggal vs Multi-Baris

Comment Baris Tunggal

Untuk komentar singkat satu baris:

<!-- Ini komentar satu baris -->
<p>Teks paragraf.</p>

Comment Multi-Baris

Untuk komentar yang lebih panjang, tulis di beberapa baris:

<!--
  Ini adalah komentar yang ditulis
  di beberapa baris untuk penjelasan
  yang lebih lengkap dan detail.
-->
<p>Teks paragraf.</p>

Keduanya valid di HTML5. Pilih yang paling nyaman sesuai kebutuhan.

Best Practice Menulis Comment

Do’s (Yang Sebaiknya Dilakukan)

  • Tulis comment yang jelas dan singkat — Comment harus menjelaskan “mengapa”, bukan “apa”
  • Perbarui comment saat kode berubah — Comment yang sudah tidak sesuai justru membingungkan
  • Gunakan comment untuk menjelaskan keputusan teknis — Misalnya kenapa memilih pendekatan tertentu
  • Gunakan comment untuk menandai bagian kode — Membantu navigasi di file yang panjang
<!-- Menggunakan flexbox karena butuh align vertical -->
<!-- ID ini jangan dihapus, sudah dipanggil oleh JavaScript -->

Don’ts (Yang Sebaiknya Dihindari)

  • Jangan tulis comment yang menjelaskan kode yang sudah jelas — Comment seperti <h1>Ini heading</h1> tidak berguna
  • Jangan tulis comment yang outdated — Comment lama yang tidak diperbarui menyesatkan
  • Jangan sembunyikan informasi sensitif di comment — Komentar tetap bisa dilihat di source code browser
  • Jangan gunakan comment untuk menyembunyikan kode permanen — Gunakan version control (Git) untuk melacak perubahan
<!-- ❌ Comment yang tidak berguna -->
<p>Ini paragraf</p>

<!-- ✅ Comment yang menjelaskan alasan -->
<!-- Paragraf ini sengaja dipisah untuk mobile view -->
<p>Bagian pertama</p>
<p>Bagian kedua</p>

Comment di Berbagai Konteks

Comment untuk Struktur Halaman

<!DOCTYPE html>
<html lang="id">
  <head>
    <!-- Meta tags untuk SEO -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Deskripsi halaman untuk search engine" />
    <title>Judul Halaman</title>
  </head>
  <body>
    <!-- Header dan navigasi -->
    <header>
      <nav><!-- Navigasi --></nav>
    </header>

    <!-- Konten utama -->
    <main><!-- Isi halaman --></main>

    <!-- Footer -->
    <footer><!-- Informasi footer --></footer>
  </body>
</html>

Comment untuk Debugging

Saat mengembangkan website, kamu bisa menggunakan comment untuk mengisolasi masalah:

<p>Bagian ini normal</p>
<!-- <div class="problematic">Bagian ini menyebabkan error</div> -->
<p>Bagian ini juga normal</p>

Jika masalah hilang setelah dikomentari, berarti kode di dalam comment adalah penyebabnya.

Comment dalam HTML vs Bahasa Lain

Perlu diketahui, syntax comment berbeda di tiap bahasa pemrograman:

BahasaSyntax Comment
HTML<!-- komentar -->
CSS/* komentar */
JavaScript// komentar atau /* komentar */
PHP// komentar atau /* komentar */

Dalam satu file HTML, kamu mungkin menemukan ketiga jenis comment ini jika ada CSS dan JavaScript inline.

Contoh Penggunaan Gabungan

Berikut contoh lengkap yang menggabungkan berbagai kegunaan comment:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Penggunaan Comment</title>
    <style>
      /* CSS untuk styling halaman */
      body {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <!-- Header: Logo dan Navigasi -->
    <header>
      <h1>Website Saya</h1>
      <nav>
        <a href="/">Beranda</a>
        <a href="/about">Tentang</a>
        <a href="/contact">Kontak</a>
      </nav>
    </header>

    <!-- Konten Utama -->
    <main>
      <article>
        <h2>Artikel Pertama</h2>
        <p>Isi artikel di sini.</p>
      </article>

      <!--
        TODO: Tambahkan sidebar
        Deadline: akhir bulan
        Hubungi Budi untuk desainnya
      -->
    </main>

    <!-- Footer -->
    <footer>
      <p>&copy; 2026 Website Saya</p>
    </footer>
  </body>
</html>

Ringkasan

  • Comment ditulis dengan syntax <!-- komentar -->
  • Comment tidak ditampilkan oleh browser, hanya terlihat di source code
  • Gunakan comment untuk menjelaskan kode, menonaktifkan kode sementara, atau menandai bagian yang perlu diperbaiki
  • Tulis comment yang jelas, singkat, dan relevan
  • Jangan gunakan comment untuk menyembunyikan informasi sensitif
  • Perbarui comment saat kode berubah agar tetap akurat

Langkah Selanjutnya

Kamu sudah memahami cara menulis comment di HTML. Di artikel selanjutnya, kita akan belajar tentang link dan gambar — cara membuat hyperlink dan menyisipkan gambar ke dalam halaman web.