Komentar HTML

Saat membuat dokumen HTML terkadang kita perlu menyisipkan catatan atau komentar.

Tapi, kita tidak boleh menulis catatan menggunakan teks normal seperti teks catatan pada umumnya karena ini akan mengacaukan kode HTML.

Untungnya HTML menyediakan sintaks atau notasi khusus yang memungkinkan kita menulis catatan yang berkerja tanpa merusak kode.

Oleh karena itu, mari kita pelajari lebih lanjut.

Apa itu komentar?

Bagaimana cara membuatnya?

Mari kita mulai.

Apa Itu Komentar?
Cara Membuat Komentar di HTML
Shortcut Komentar Visual Studio Code
Penggunaan Umum Komentar

Apa Itu Komentar?

Komentar HTML adalah blok kode yang tidak ditampilkan di browser, biasanya digunakan untuk membuat dokumentasi atau catatan.

Teks komentar dibungkus dengan notasi, bukan tag, oleh karena tidak memiliki perilaku yang sama seperti tag, termasuk atribut.

Apapun yang Anda tulis di dalam komentar, tidak akan ditampilkan di browser. Tapi ini bisa kita lihat dalam tampilan sumber halaman (view page source).

Jika kode HTML yang ditulis hanya beberapa baris saja, notasi ini mungkin kurang berguna. Tapi kalau sudah mencapai ribuan baris, mungkin akan lebih terasa manfaatnya.

Cara Membuat Komentar di HTML

Mirip tag HTML pada umumnya, komentar terdiri dari pembuka (), kita bisa menyisipkan teks diantara tag tersebut.

Perhatikan bahwa kurung sudut (<) tag pembuka menghadap ke kiri diikuti dengan tanda seru (!) lalu dua buah tanda hubung (--).

Sedangkan tag penutup ditulis dengan dua buah tanda hubung (--), diikuti dengan kurung sudut menghadap ke kanan (>), tanpa tanda seru.

Sintaks:

<!-- teks -->

Contoh:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <p>Saya sedang belajar HTML di Kodealgo.</p>
    <!-- ini adalah komentar beberapa baris -->
  </body>
  <!-- 
    ini adalah komentar
    multi-line (lebih dari satu bari)
   -->
</html>

Hasil:

Shortcut Komentar Visual Studio Code

Shortcut Komentar HTML Visual Studio Code

Jika Anda menggunakan kode editor Visual Studio Code, Anda bisa membuat komentar menggunakan shortcut yang disediakan.

Tidak perlu menulis satu per satu notasi, cukup tekan tombol Ctrl + / maka notasi komentar akan dibuatkan secara otomatis.

Jika kursor ditempatkan pada baris yang berisi teks atau kode, maka teks tersebut akan secara otomatis dimasukkan ke dalam komentar.

Ini sebetulnya juga berlaku untuk bahasa pemrograman yang lainnya termasuk JavaScript dan CSS.

Penggunaan Umum Komentar

Komentar bisa kita gunakan untuk beragam kebutuhan.

Apa pun teks yang tidak ingin ditampilkan di browser, selain dihapus, kita bisa menggunakan komentar.

Berikut beberapa penggunaan umum komentar HTML.

1. Membuat Catatan

Kadang saat membuat halaman HTML kita perlu menulis catatan di dalam kode.

Misalnya ketika kita sedang belajar.

Kita bisa menggunakan notasi ini untuk menulis catatan, misalnya catatan yang menjelaskan tag tertentu.

Sehingga jika kita lupa fungsi dari sebuah tag, kita bisa langsung membaca catatan yang telah ditulis di dalam file HTML.

Contoh:

<!DOCTYPE html>
<!-- 
atribut lang di dalam tag <html> digunakan untuk menentukan bahasa,
"id" adalah kode bahasa Indonesia.
--->
<html lang="id">
  <head>
    <!-- tag <title> digunakan untuk judul tab browser -->
    <title>Belajar HTML</title>
  </head>
  <body>
    <!-- tag <p> untuk membuat paragraf -->
    <p>Saya sedang belajar HTML di Kodealgo.</p>
  </body>
</html>

2. Mencegah Kode HTML Dieksekusi

Saat menulis kode HTML, kadang kita ingin menguji atau mengganti kode HTML tertentu dengan kode yang berbeda.

Tapi kita seringkali ragu apakah kode baru ini akan berjalan sesuai harapan atau tidak.

Alih-alih menghapus kode HTML lama, kita bisa menggunakan komentar agar browser tidak mengeksekusi atau mengevaluasi kode lama.

Sehingga jika kode baru tidak sesuai harapan, kita bisa menghapus komentar kode lama tanpa harus menulis ulang dari awal.

Contoh:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <!-- <p>Ini adalah paragraf lama.</p> -->
    <p style="color: salmon">Ini adalah paragraf baru berwarna.</p>
  </body>
</html>

3. Menandai Tag Bersarang

Saat menulis kode HTML, kita akan sering menulis tag di dalam tag, bersarang.

Semakin dalam tag bersarang dan semakin banyak baris kode HTML yang kita tulis, maka akan semakin sulit kita menemukan tag penutup.

Untuk mengatasi masalah ini, kita bisa menambahkan catatan pada tag penutup yang ingin ditandai.

Contoh:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <div>
      <div>
        <div class="container">
          <div>
            <div>
              <div class="wrapper">
                <div>
                  <form method="POST" action="/">
                    <input type="text" name="email" />
                    <input type="password" name="password" />
                    <button type="submit">Login</button>
                  </form>
                </div>
              </div> <!-- wrapper -->
            </div>
          </div>
        </div> <!-- container -->
      </div>
    </div>
  </body>
</html>