HTML Comments

❮ Previous Next ❯

Bab 1: Catatan "Hantu" dalam Kode

Dalam pemrograman, Comments (Komentar) adalah bagian dari kode yang sengaja diabaikan oleh browser. Komentar tidak akan pernah tampil di layar pengguna, tetapi sangat penting bagi pengembang (developer).

Bayangkan Anda sedang membaca novel, lalu ada catatan kaki kecil yang menjelaskan konteks kalimat tersebut. Itulah fungsi komentar dalam HTML: memberikan penjelasan, catatan, atau pengingat bagi diri sendiri atau rekan kerja.

💡 Syntax Komentar:

Untuk membuat komentar, gunakan sintaks berikut:

<!-- Tulis catatan di sini -->
  • Dimulai dengan <!--
  • Diakhiri dengan -->
  • Apapun di antaranya TIDAK akan diproses oleh browser.

Bab 2: Fungsi Utama Komentar

Ada dua alasan utama mengapa developer profesional selalu menggunakan komentar:

1. Dokumentasi & Penjelasan

Saat proyek semakin besar, kode akan menjadi rumit. Komentar membantu Anda mengingat "apa fungsi bagian ini" saat Anda membuka file tersebut 6 bulan kemudian.

2. Debugging (Perbaikan)

Anda bisa "mematikan" sebagian kode sementara untuk mencari sumber error tanpa harus menghapusnya. Ini disebut Commenting Out.

Contoh Penggunaan:

<!-- Ini adalah Header Website -->
<h1>Selamat Datang</h1>

<!-- 
  Komentar juga bisa 
  ditulis lebih dari satu baris
  seperti ini.
-->
<p>Paragraf ini akan tampil.</p>

<!-- <p>Paragraf ini TIDAK akan tampil.</p> -->

Bab 3: Mematikan Kode (Commenting Out)

Teknik ini sangat berguna saat Anda sedang bereksperimen. Daripada menghapus kode yang mungkin Anda butuhkan nanti, cukup bungkus kode tersebut dengan tag komentar.

<p>Fitur Login:</p>
<!-- 
  <button>Login dengan Google</button>
  (Tombol di atas disembunyikan sementara karena error)
-->
<button>Login Biasa</button>

Bab 4: Komentar Inline

Komentar juga bisa diletakkan di tengah-tengah baris kode jika Anda ingin memberikan catatan singkat di sebelah elemen tertentu.

<p>Harga: Rp 50.000 <!-- Harga Promo --></p>

Bab 5: Etika Menulis Komentar

Meskipun tidak terlihat oleh pengguna biasa, source code Anda bisa diintip oleh siapa saja (Klik Kanan -> View Page Source). Oleh karena itu:

⚡ Proyek Kilat: Debugging Mode

Misi Anda adalah memperbaiki tampilan halaman. Ada sebuah "Pesan Rahasia" yang tersembunyi di dalam komentar, dan ada sebuah "Pesan Error" yang harus disembunyikan.

🎯 Target Misi:

  • ✅ Buat judul <h2> dengan teks "Area Debug".
  • ✅ Tulis paragraf: <p>Ini pesan error</p>, lalu SEMBUNYIKAN paragraf tersebut menggunakan tag komentar.
  • ✅ Tulis paragraf: <p>Ini pesan rahasia</p>, dan pastikan paragraf ini TAMPIL (jangan dikomentari).

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Layanan & Jasa

Pembuatan Website Template Web Jasa Iklan

Fondasi Utama

Tag & Struktur Atribut Elemen Atribut Global Simbol & Karakter

Visual & Media

Kamus Warna Grafik Canvas Audio & Video Cek Browser

Alat Bantu Dev

Konversi PX ke EM Shortcut Keyboard Status HTTP URL Encoding

Standar Global

Kode Bahasa Kode Negara Atribut Event

Langkah Selanjutnya

Sekarang Anda sudah menguasai dasar-dasar penulisan HTML. Langkah berikutnya adalah membuat website Anda menjadi lebih hidup dan penuh warna dengan mempelajari HTML Colors.

INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY

Lanjut ke HTML Colors »
❮ Previous Next: HTML Colors ❯