Komentar HTML: Sintaks, Komentar Multi Baris dan Shortcut

Cara menulis komentar di HTML

Komentar HTML diawali dengan <!-- dan diakhiri dengan -->. Browser mengabaikan semua yang ada di antara kedua penanda itu, jadi teksnya tidak pernah muncul di halaman:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Hanya heading dan paragrafnya yang muncul. HTML punya satu sintaks komentar, dan sintaks itu berlaku untuk satu baris maupun banyak baris.

Shortcut di VS Code dan kebanyakan editor: pilih beberapa baris lalu tekan Ctrl + / (Cmd + / di Mac). Editor menambahkan penandanya untukmu, dan tombol yang sama menghapusnya.

Menonaktifkan kode dengan komentar

Karena browser mengabaikan tag di dalam komentar, membungkus markup dengan <!-- dan --> menyembunyikannya tanpa menghapusnya. Ini cara tercepat untuk menguji halaman tanpa sebuah elemen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Hapus <!-- dan --> di baris banner dan banner-nya muncul lagi. Kode yang dinonaktifkan dengan komentar tetap diunduh bersama halaman, jadi setelah kamu yakin tidak membutuhkannya, hapus saja.

Komentar tidak bisa bersarang

--> yang pertama selalu menutup komentar. Kalau kode yang kamu nonaktifkan sudah berisi komentar, komentar luar berakhir lebih cepat dan sisanya tumpah ke halaman. Contoh ini memberikan komentar bersarang ke parser browser dan menunjukkan apa yang akhirnya terlihat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> tampil sebagai teks. Sebelum menonaktifkan blok besar, hapus komentar di dalamnya (atau ubah -->-nya supaya tidak cocok lagi).

Beberapa aturan lain: komentar tidak boleh diawali dengan <!--> (itu adalah komentar kosong, jadi yang mengikutinya akan terlihat), dan --!> menutup komentar sama seperti -->, jadi jangan tulis keduanya di dalam teks komentar.

Komentar bersifat publik

Komentar adalah bagian dari HTML yang dikirim server, jadi setiap pengunjung bisa membacanya lewat View Source atau developer tools. Sebuah script juga bisa mendaftarnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Gunakan komentar hanya untuk catatan tentang kode. Apa pun yang bersifat pribadi (password, API key, URL internal, data pelanggan) tidak boleh ada di HTML, entah di dalam komentar atau tidak. Build tool dan minifier biasanya menghapus komentar dari HTML produksi, yang juga menghemat beberapa byte.

Komentar di CSS dan JavaScript

Komentar HTML hanya berfungsi di HTML. Di dalam <style> dan <script>, kamu memakai sintaks komentar bahasa itu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

Heading-nya menjadi biru: CSS mengabaikan penanda <!-- dan --> itu sendiri dan tetap menerapkan aturan di antaranya. Hanya /* ... */ yang menonaktifkan CSS. Halaman komentar CSS membahas sintaks itu.

Komentar kondisional

Kode lama kadang berisi <!--[if IE]> ... <![endif]-->. Ini adalah instruksi untuk Internet Explorer 9 dan versi sebelumnya. Semua browser saat ini memperlakukannya sebagai komentar biasa, jadi konten di dalamnya diabaikan dan seluruh bloknya bisa dihapus.

Kesalahan umum

• Membuat komentar bersarang. --> di dalam mengakhiri komentar luar. Hapus komentar di dalam sebelum menonaktifkan sebuah blok.
• Menaruh rahasia di komentar. Komentar dikirim ke setiap pengunjung.
• Lupa menulis -->. Semua yang ada setelah <!-- sampai akhir file menghilang, sehingga seolah setengah halaman lenyap.
• Memakai <!-- --> di CSS. Cara itu tidak menonaktifkan aturan. Pakai /* */.
• Memakai // di HTML. // note tampil sebagai teks. HTML hanya memahami <!-- -->.