8. Belajar Komentar

HTML Dasar: Belajar Komentar

Pembahasan berikutnya pada seri belajar HTML dasar ini adalah tentang komentar pada HTML.

Apa itu komentar pada HTML?

Komentar Pada HTML

Komentar pada HTML adalah sebuah tag/element yang digunakan untuk meninggalkan sebuah catatan pada dokumen HTML kita [1]. Catatan tersebut bisa berupa deskripsi/tujuan suatu bagian kode HTML, atau juga bisa digunakan untuk memberikan rekomendasi, atau bahkan untuk menyembunyikan sementara sebuah kode HTML dengan tujuan debug.

Komentar pada HTML akan diabaikan oleh web browser, ia tidak akan ditampilkan sehingga user tidak akan melihat apa-apa. Komentar bahkan bisa mempermudah orang lain untuk memahami struktur kode HTML kita dan akan membuat kode kita semakin mudah dibaca [2].

Cara Membuat Komentar Pada HTML

Komentar pada HTML diawali dengan tag <!-- dan diakhiri dengan -->. Sehingga konten apa pun yang diletakkan di antara keduanya akan benar-benar diabaikan dan tidak ditampilkan sama sekali.

Perhatikan contoh berikut:

<!-- Sebuah komentar yang bisa kita baca -->
<h1>Judul Dokumen</h1>
<!-- Akan tetapi komentar tidak akan ditampilkan pada browser -->
<p>Teks deskripsi suatu dokumen</p>

Hasil keluaran:

Shortcut Membuat Komentar

Dalam kebanyakan teks editor modern (seperti misalnya VSCode atau VSCodium), kita bisa menggunakan kombinasi tombol Ctrl+/ untuk membuat/membatalkan komentar.

Perhatikan demonstrasi berikut:

Tujuan Umum Penggunaan Komentar

Secara umum komentar bisa kita gunakan untuk memberikan informasi tambahan tentang kode HTML yang kita tulis sehingga ia menjadi lebih “hidup” atau lebih mudah untuk dipahami baik oleh kita sendiri lebih-lebih untuk orang lain.

Di antara tujuan umum penggunaan komentar pada HTML adalah:

  1. Memberikan deskripsi tentang kode HTML yang kita tulis. Hal ini sangat berguna apalagi jika dokumen memiliki ribuan elemen yang rumit.
  2. Menyembunyikan sementara beberapa bagian kode HTML untuk tujuan debug.
  3. Kita juga bisa menulis komentar sebagai catatan todo-list agar kita tidak lupa hal apa yang harus kita lakukan selanjutnya.
  4. Jika bekerja dengan tim, komentar pada HTML juga bisa kita gunakan untuk berkomunikasi dengan kawan di ujung layar yang berbeda 😁

Agar lebih jelas, mari kita coba buat contoh untuk masing-masing tujuan di atas.

Contoh 1: Memberikan deskripsi kode HTML

Contoh yang pertama adalah penggunaan yang paling umum yaitu kita memberikan informasi yang berkaitan dengan kode HTML yang kita tulis.

Perhatikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!-- awal header -->
  <header>
    <h1>Halaman ini responsive</h1>
  </header>
  <!-- akhir header -->

  <!-- Gambar ini ditampilkan apa adanya tanpa pengaturan ukuran -->
  <img src="/images/jagongoding-logo-full.png" alt="">
</body>
</html>

Contoh 2: “Menyembunyikan” sementara suatu elemen HTML

Contoh yang kedua kita bisa menggunakan untuk menyembunyikan sebuah element atau beberapa elemen HTML untuk kepentingan tertentu semisal debug.

Perhatikan kode di bawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!-- awal header -->
  <!-- <header>
    <h1>Halaman ini responsive</h1>
  </header> -->
  <!-- akhir header -->

  <img src="/images/jagongoding-logo-full.png" alt="">
</body>
</html>

Pada kode di atas kita menyembunyikan tag <header> beserta kontennya.

Contoh 3: Untuk membuat list “TODO”

Selain itu kita juga bisa menyisipkan list “TODO” yaitu hal apa saja yang harus kita lakukan selanjutnya, hal ini kita lakukan agar kita tidak lupa akan hal-hal yang penting.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!-- awal header -->
  <header>
    <h1>Halaman ini responsive</h1>
  </header>
  <!-- akhir header -->

  <!-- TODO: jangan lupa di sini nanti tampilkan beberapa paragraf-->

  <img src="/images/jagongoding-logo-full.png" alt="">

  <!-- TODO: DI SINI JUGA JANGAN LUPA TAMBAHKAN FOOTER -->
</body>
</html>

Dan biasanya komentar TODO akan memiliki warna yang berbeda pada teks editor modern.

Perhatikan tangkapan layar berikut dari teks editor VSCodium yang saya gunakan:

Dengan pewarnaan yang berbeda seperti itu tentu saja akan membuat kita “tidak kelewatan”.

Contoh 4: Curhat dan Tukar Pesan

Selain itu, jika kita bekerja dengan tim, kita bisa memanfaatkan komentar HTML untuk berkomunikasi serta bertukar pesan antar programmer.

Perhatikan contoh berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh menggunakan meta viewport</title>
</head>
<body>
  <!--
    Please bro jangan hapus kode ini, meskipun agak belibet
    tapi ini working
   -->
  <header>
    <h1>Halaman ini responsive</h1>
  </header>

  <img src="/images/jagongoding-logo-full.png" alt="">
</body>
</html>

Kode Program Lengkap

Sekian dulu untuk pertemuan kali ini.

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara memformat teks pada HTML seperti cetak tebal, cetak miring, garis bawah, teks tercoret dan lain-lain.

Stay tune!

Referensi

[1] https://www.freecodecamp.org/news/html-comments-how-to-comment-out-your-html-code/ – diakses tanggal 10 Juni 2021
[2] https://www.tutorialspoint.com/html/html_comments.htm – diakses tanggal 10 Juni 2021