Shortcut Comment VS Code dan Aturan Komentar HTML, CSS, JS
Shortcut comment di VS Code, cara komentar multi-baris, dan beda tanda komentar HTML, CSS, dan JavaScript. Plus kenapa komentar terlihat di view-source.
Pembuat Hyper Sheets & BelajarWeb.dev
Cara tercepat memberi komentar adalah shortcut editor: di VS Code tekan Ctrl+/ (Windows/Linux) atau Cmd+/ (Mac), dan shortcut ini sadar bahasa, dia otomatis memakai tanda komentar HTML, CSS, atau JavaScript sesuai jenis filenya. Artikel ini membahas cara menulis komentar yang benar di ketiga bahasa itu, komentar multi-baris, fungsi komentar dalam kode, kenapa isinya tetap terbaca lewat view-source, dan enam kesalahan komentar yang perlu dihindari.
Comment (komentar) adalah catatan di dalam kode yang diabaikan oleh browser, tidak akan tampil di halaman web. Di HTML, komentar ditulis di antara tanda buka dan tutup komentar: teks apa pun yang berada di dalamnya dilewati begitu saja saat browser merender halaman. Sintaks lengkapnya seperti ini:
<!-- Ini adalah komentar. Browser tidak menampilkannya di halaman. -->
Kelihatannya sepele, cuma catatan yang “tidak melakukan apa-apa”, tapi komentar adalah salah satu alat paling berguna di kotak peralatan developer. Ia dipakai untuk mendokumentasikan kode, menandai bagian-bagian halaman, dan menonaktifkan kode sementara saat debugging. Panduan ini membahas semuanya sampai tuntas: arti kata comment, tulisan comment yang benar (dan yang salah), fungsi-fungsinya, shortcut keyboard biar cepat, cara comment di CSS dan JavaScript, sampai kesalahan umum yang sering menjebak pemula, termasuk satu kebiasaan berbahaya: menyimpan informasi sensitif di dalam komentar.
Comment Adalah… (Arti Kata dan Definisi dalam Pemrograman)
Secara bahasa, comment artinya “komentar”, kata benda dari bahasa Inggris yang berarti tanggapan, catatan, atau ulasan. Dalam dunia pemrograman, comment adalah baris atau blok teks di dalam kode yang sengaja diabaikan oleh komputer (browser, compiler, atau interpreter), ia ditulis untuk dibaca manusia, bukan mesin. Itulah kenapa komentar sering disebut “catatan untuk developer”.
Perlu dibedakan dengan penggunaan kata yang sama di dunia media sosial: “comment” di Instagram atau YouTube adalah tanggapan pengunjung terhadap sebuah konten. Konsepnya mirip, sama-sama catatan tambahan, tapi di artikel ini kita membahas comment dalam konteks kode.
Setiap bahasa punya tanda komentarnya sendiri. Di HTML, komentar diawali <!-- dan diakhiri -->. Semua yang ada di antara dua penanda itu tidak dirender:
<p>Paragraf ini tampil di halaman.</p>
<!-- Kalimat ini TIDAK tampil di halaman. -->
<p>Paragraf ini juga tampil.</p>
Kalau kamu buka halaman itu di browser, yang terlihat hanya dua paragraf. Komentar di tengahnya “menghilang”, bukan dihapus, tapi dilewati saat rendering. Ia tetap ada di file HTML-nya (ini penting, kita bahas di bagian keamanan nanti).
Komentar biasanya jadi salah satu materi paling awal saat belajar HTML, tepat setelah kamu paham struktur dasar dokumen. Kalau kamu benar-benar baru mulai dan istilah “tag” atau “elemen” saja masih asing, kenalan dulu lewat lesson apa itu HTML atau baca panduan belajar HTML untuk pemula, setelah itu artikel ini akan terasa jauh lebih nyambung.
Cara Menulis Comment di HTML: Tulisan yang Benar vs Salah
Tulisan comment yang benar di HTML: mulai dengan <!--, tulis catatanmu, lalu tutup dengan -->. Empat karakter pembuka (kurung siku, seru, dua strip) dan tiga karakter penutup (dua strip, kurung siku), tanpa spasi di antara karakter-karakter penandanya sendiri. Di dalamnya, kamu bebas menulis teks apa pun, satu baris ataupun banyak baris.
Bentuk yang benar:
<!-- Komentar satu baris -->
<!--
Komentar juga boleh
panjang beberapa baris seperti ini.
Semuanya tetap diabaikan browser.
-->
<!--komentar tanpa spasi di dalam juga valid, tapi kurang enak dibaca-->
Sekarang bentuk-bentuk yang salah, ini yang sering bikin pemula bingung kenapa “komentarnya bocor” ke halaman:
<!-- SALAH: tanda seru ikut di penutup -->
<!-- komentar --!>
<!-- SALAH: cuma satu strip -->
<!- komentar ->
<!-- SALAH: komentar bersarang (nested) -->
<!-- luar <!-- dalam --> sisa teks ini malah tampil di halaman -->
<!-- BERISIKO: double-dash di dalam komentar -->
<!-- jangan tulis -- beruntun di sini -->
Tiga aturan penting yang jarang dijelaskan tutorial pemula:
- Komentar tidak boleh bersarang (nested). HTML tidak mengenal “komentar di dalam komentar”. Begitu browser menemukan
-->pertama, komentar dianggap selesai, sisanya dibaca sebagai konten biasa dan tampil di halaman. Ini penyebab klasik teks aneh tiba-tiba muncul di website. - Hindari dua strip beruntun (
--) di dalam isi komentar. Pada dokumen XML/XHTML,--di dalam komentar itu invalid, dan validator HTML akan mengeluhkannya. Lebih bahaya lagi: urutan seperti--!>juga bisa menutup komentar lebih awal. Aturan amannya sederhana, di dalam komentar, jangan pernah menulis strip dua kali berturut-turut. - Isi komentar tidak boleh diawali
>atau->. Kasus langka, tapi spec HTML melarangnya. Selama kamu membiasakan diri memberi spasi setelah<!--, kamu otomatis aman dari aturan ini.
Satu hal lagi: komentar bisa diletakkan hampir di mana saja di dokumen, di dalam body, di dalam head, di antara elemen, kecuali di dalam tag itu sendiri. Ini tidak valid:
<!-- SALAH: komentar tidak boleh di dalam tag -->
<p <!-- komentar --> >Halo</p>
<!-- BENAR: komentar di luar tag -->
<!-- paragraf pembuka -->
<p>Halo</p>
Kalau mau langsung latihan menulisnya dengan editor langsung di browser plus soal-soal kecil, lesson komentar HTML di Hyper Sheets membahas topik ini secara interaktif, kamu menulis komentarnya sendiri dan langsung melihat hasilnya.
Apa Fungsi Komentar dalam Kode?
Fungsi komentar ada tiga besar: mendokumentasikan kode agar mudah dipahami, menandai bagian-bagian file yang panjang, dan menonaktifkan kode sementara (comment-out) saat debugging. Ketiganya sama-sama sering dipakai di dunia nyata, dan ketiganya layak kamu kuasai sejak awal belajar.
1. Dokumentasi: Menjelaskan Maksud Kode
Kode menjelaskan apa yang terjadi; komentar menjelaskan kenapa. Enam bulan lagi, kamu (atau rekan satu tim) akan membaca kode itu tanpa ingat konteksnya, komentar yang baik menyelamatkan berjam-jam kebingungan.
<!-- Banner promo: hapus setelah periode diskon berakhir 31 Agustus -->
<div class="promo-banner">
<p>Diskon 50% untuk semua kelas!</p>
</div>
Tanpa komentar itu, developer lain (atau kamu sendiri) tidak berani menghapus banner tersebut karena tidak tahu apakah masih dipakai.
2. Penanda Section: Peta untuk File yang Panjang
File HTML halaman nyata bisa ratusan baris. Komentar penanda membuatnya mudah dinavigasi, seperti judul bab di sebuah buku:
<!-- ===== HEADER & NAVIGASI ===== -->
<header>
<nav>...</nav>
</header>
<!-- ===== HERO SECTION ===== -->
<section class="hero">...</section>
<!-- ===== DAFTAR PRODUK ===== -->
<section class="products">...</section>
<!-- ===== FOOTER ===== -->
<footer>...</footer>
Saat kamu perlu mengedit bagian produk, tinggal cari teks “DAFTAR PRODUK” dengan Ctrl+F di editor, jauh lebih cepat daripada men-scroll dan menebak-nebak.
3. Comment-Out: Menonaktifkan Kode Sementara
Ini fungsi yang paling sering dipakai saat debugging. Daripada menghapus kode yang dicurigai bermasalah (dan menyesal kalau ternyata bukan dia biang keroknya), kamu “bungkus” saja dengan tanda komentar, kode itu berhenti bekerja tapi tetap ada di file:
<!-- Sementara dinonaktifkan: gambar ini bikin layout rusak di mobile
<img src="banner-besar.jpg" alt="Banner promosi">
-->
<p>Konten lain tetap berjalan normal.</p>
Teknik ini disebut comment-out (atau “meng-comment kode”). Alur kerjanya saat debugging: comment-out bagian yang dicurigai → refresh browser → kalau masalah hilang, kamu sudah menemukan tersangkanya → perbaiki → hapus tanda komentarnya (uncomment). Sederhana, tapi ini salah satu teknik debugging paling efektif yang ada, dan bekerja di semua bahasa, bukan cuma HTML.
Cara Cepat: Shortcut Comment di VS Code dan Komentar Multi-Baris
Cara tercepat memberi komentar adalah shortcut editor: di VS Code, tekan Ctrl+/ (Windows/Linux) atau Cmd+/ (Mac), baris tempat kursor berada langsung terbungkus tanda komentar. Tekan sekali lagi untuk menghapusnya (uncomment). Tidak perlu mengetik tanda komentarnya manual, dan tidak akan ada salah ketik seperti lupa satu strip.
Yang membuat shortcut ini luar biasa: dia sadar bahasa. Di file .html dia memakai tanda komentar HTML, di file .css dia memakai /* */, di file .js dia memakai //, kamu cukup hafal satu shortcut untuk semua bahasa.
Untuk komentar banyak baris sekaligus, ada dua cara:
- Blok beberapa baris lalu tekan
Ctrl+/, semua baris yang terseleksi ikut terkomentar dalam satu blok komentar HTML. - Shortcut block comment:
Shift+Alt+A(Mac:Shift+Option+A), membungkus seleksi dengan komentar blok. Di HTML hasilnya sama, tapi di JavaScript ini menghasilkan/* */alih-alih//per baris.
Karena tanda komentar HTML bekerja lintas baris secara alami, komentar multi-baris di HTML tidak butuh sintaks khusus, cukup satu pembuka dan satu penutup yang mengapit semuanya:
<!--
Semua yang ada di sini dinonaktifkan:
<section class="testimonials">
<h2>Kata Mereka</h2>
<p>Testimoni pelanggan...</p>
</section>
-->
Praktik: Memberi Komentar pada Halaman HTML Nyata
Cara terbaik memahami komentar adalah memakainya di file sungguhan: beri penanda section, dokumentasikan keputusan yang tidak jelas, dan coba alur comment-out untuk debugging. Mari kita jalani ketiganya di satu halaman profil sederhana.
Mulai dari halaman tanpa komentar sama sekali:
<body>
<header>
<h1>Raka Pratama</h1>
<p>Web Developer</p>
</header>
<main>
<img src="foto-lama.jpg" alt="Foto Raka">
<h2>Tentang Saya</h2>
<p>Halo! Saya sedang belajar web development.</p>
</main>
<footer>
<p>Kontak: [email protected]</p>
</footer>
</body>
Halaman sependek ini masih mudah dibaca. Tapi bayangkan tiga bulan lagi ia tumbuh jadi 300 baris, sekarang saat yang tepat membangun kebiasaan baik. Langkah pertama, beri penanda section:
<body>
<!-- ===== HEADER: nama & titel ===== -->
<header>
<h1>Raka Pratama</h1>
<p>Web Developer</p>
</header>
<!-- ===== KONTEN UTAMA ===== -->
<main>
<!-- TODO: ganti dengan foto terbaru sebelum halaman di-publish -->
<img src="foto-lama.jpg" alt="Foto Raka">
<h2>Tentang Saya</h2>
<p>Halo! Saya sedang belajar web development.</p>
</main>
<!-- ===== FOOTER ===== -->
<footer>
<p>Kontak: [email protected]</p>
</footer>
</body>
Perhatikan komentar TODO: di atas gambar, ini konvensi yang sangat umum di dunia kerja. Banyak editor (termasuk VS Code dengan extension) bisa mengumpulkan semua TODO di proyekmu jadi satu daftar tugas.
Sekarang skenario debugging: misalkan halaman tampil aneh dan kamu curiga gambarnya yang bermasalah. Alih-alih menghapus baris img, comment-out dulu:
<!-- Debug: cek apakah gambar ini penyebab layout rusak
<img src="foto-lama.jpg" alt="Foto Raka">
-->
Refresh browser. Kalau tampilannya jadi normal, tersangka ditemukan, dan kode aslinya masih utuh untuk diperbaiki. Kalau masalahnya masih ada, kembalikan (uncomment dengan Ctrl+/) lalu curigai bagian lain. Pola “nonaktifkan → cek → kembalikan” ini akan kamu pakai ratusan kali sepanjang karier.
Kalau kamu sedang mengikuti proses membangun situs pertamamu dari nol sampai online, kebiasaan berkomentar ini pas sekali diselipkan sejak awal, panduan membuat website pertama adalah tempat yang bagus untuk mempraktikkannya di proyek utuh.
Bonus: Cara Comment di CSS dan JavaScript
Setiap bahasa punya tanda komentarnya sendiri: CSS hanya mengenal /* */, sedangkan JavaScript punya dua, // untuk satu baris dan /* */ untuk banyak baris. Karena satu halaman web hampir selalu memakai ketiga bahasa ini bersamaan, kamu perlu hafal ketiganya, dan tahu bahwa tanda komentar HTML tidak berlaku di dalam file CSS atau JavaScript, begitu pun sebaliknya.
Comment di CSS
CSS cuma punya satu jenis komentar, dan ia bekerja untuk satu baris maupun banyak baris:
/* Ini komentar satu baris di CSS */
/*
Ini komentar
banyak baris.
*/
.tombol {
background: #3b82f6;
/* border dihapus sementara, klien minta tampilan lebih bersih */
/* border: 2px solid #1d4ed8; */
color: white;
}
Perhatikan: tidak ada komentar // di CSS murni. Menulis // di CSS tidak membuat error yang jelas, baris itu diam-diam dianggap selector rusak dan aturan di bawahnya bisa ikut kacau. Ini beda dengan preprocessor seperti Sass yang memang mendukung //. Kalau kamu baru menyentuh CSS dan ingin fondasi yang runtut sejak awal, mulai dari lesson apa itu CSS yang membahas dasarnya lesson per lesson.
Comment di JavaScript
JavaScript lebih fleksibel, dua sintaks:
// Komentar satu baris: semua setelah dua garis miring diabaikan
let harga = 50000; // boleh juga di ujung baris kode
/*
Komentar banyak baris,
sama seperti di CSS.
*/
// Comment-out kode saat debugging:
// console.log("nilai harga:", harga);
Aturan nested-nya mirip HTML: /* */ tidak boleh bersarang, karena penutup */ pertama mengakhiri seluruh komentar. Tapi // aman ditumpuk sebanyak apa pun, makanya banyak developer lebih suka comment-out kode JavaScript per baris dengan // (dan Ctrl+/ di VS Code memang menghasilkan //).
Kalau JavaScript sendiri masih terasa asing, apa perannya di halaman web, bedanya dengan HTML dan CSS, baca dulu apa itu JavaScript, lalu lanjutkan latihan terstrukturnya di lesson pengenalan JavaScript.
Rangkuman tiga bahasa dalam satu tabel:
| Bahasa | Satu baris | Banyak baris | Catatan |
|---|---|---|---|
| HTML | <!-- ... --> |
<!-- ... --> (sama) |
Tidak boleh nested; hindari -- di dalam |
| CSS | /* ... */ |
/* ... */ (sama) |
Tidak ada // di CSS murni |
| JavaScript | // ... |
/* ... */ |
// aman ditumpuk, /* */ tidak boleh nested |
Apakah Comment Terlihat oleh Pengunjung? Ya, di View-Source
Komentar tidak tampil di halaman, tapi tetap terkirim ke browser dan bisa dibaca siapa pun lewat view-source atau DevTools, jadi jangan pernah menyimpan informasi sensitif di dalam komentar. Ini poin yang paling sering dilupakan pemula, dan akibatnya bisa serius.
Coba sendiri: di halaman web mana pun, klik kanan lalu pilih “View Page Source” (atau tekan Ctrl+U di Chrome/Firefox pada Windows, Cmd+Option+U di Mac). Seluruh HTML halaman itu terpampang, termasuk semua komentarnya. Komentar itu “tersembunyi dari tampilan”, bukan “tersembunyi dari manusia”.
Artinya, hal-hal seperti ini adalah bencana yang menunggu waktu:
<!-- JANGAN PERNAH seperti ini:
password admin: rahasia123
API key: sk-xxxx-jangan-ditiru
catatan: halaman admin ada di /admin-tersembunyi
-->
Catatan tambahan yang berguna: banyak proses build modern (minifier seperti yang dipakai Vite atau bundler lain) otomatis membuang komentar dari file produksi untuk memperkecil ukuran. Tapi jangan jadikan itu alasan aman, tidak semua setup melakukannya, dan HTML yang ditulis tangan jelas tidak melewati proses apa pun.
Conditional Comments IE: Peninggalan Masa Lalu
Kalau kamu membuka kode website lama, kamu mungkin menemukan komentar dengan bentuk aneh seperti <!--[if IE]> ... <![endif]-->. Itu namanya conditional comment, trik zaman dulu untuk memberikan kode khusus ke browser Internet Explorer versi tertentu. Browser lain membacanya sebagai komentar biasa, tapi IE lama justru mengeksekusi isinya.
Statusnya sekarang: usang total. Internet Explorer sudah dipensiunkan, dan dukungan conditional comment bahkan sudah dihapus sejak IE 10. Kamu tidak perlu mempelajarinya, apalagi memakainya, cukup tahu artinya supaya tidak bingung saat menemukannya di kode warisan, dan hapus saja kalau kamu sedang membersihkan proyek lama.
Kapan Perlu Berkomentar, dan Kapan Kode Harus Jelas Sendiri
Komentar terbaik menjelaskan “kenapa”, bukan “apa”, dan kode yang ditulis dengan baik seharusnya sudah menjelaskan “apa”-nya sendiri. Prinsip clean code tentang komentar sering disalahpahami sebagai “jangan berkomentar”; maksud sebenarnya adalah “jangan pakai komentar untuk menambal kode yang membingungkan”.
Bandingkan dua pendekatan ini:
<!-- Kurang berguna: mengulang apa yang sudah jelas -->
<!-- ini div untuk header -->
<div class="hdr">...</div>
<!-- Lebih baik: nama yang jelas, tanpa perlu komentar -->
<header class="site-header">...</header>
Komentar pertama tidak menambah informasi apa pun, ia cuma mengulang kode. Solusi yang lebih baik bukan komentar yang lebih panjang, melainkan penamaan dan struktur yang lebih jelas: elemen semantik (header, nav, main) plus nama class yang deskriptif membuat kode “berbicara sendiri”.
Lalu kapan komentar justru wajib? Saat ada konteks yang tidak mungkin terbaca dari kode:
<!-- Urutan script ini penting: analytics harus dimuat
setelah consent-banner, sesuai kebijakan privasi -->
<script src="consent-banner.js"></script>
<script src="analytics.js"></script>
Tidak ada penamaan sebagus apa pun yang bisa menyampaikan alasan bisnis atau keputusan teknis seperti itu, di situlah komentar tak tergantikan. Pedoman singkatnya:
- Tulis komentar untuk: alasan di balik keputusan, peringatan (urutan penting, jangan dihapus), TODO yang jelas, konteks bisnis.
- Jangan pakai komentar untuk: mengulang isi kode, menambal penamaan yang buruk, menyimpan kode mati selamanya.
Topik “seni berkomentar” ini dibahas lebih dalam, lengkap dengan contoh komentar yang baik vs yang berisik, di lesson code comments pada seri clean code. Dan untuk konteks HTML secara khusus, lesson HTML best practices merangkum kebiasaan penulisan markup yang rapi, termasuk kapan penanda section membantu dan kapan berlebihan.
Comment, Coment, Komen, atau Komentar? Soal Ejaan
Ejaan bahasa Inggris yang benar adalah “comment”, dengan dua huruf m, dan padanan bakunya dalam bahasa Indonesia adalah “komentar”. Dua bentuk lain yang sering muncul: “coment” (satu m) adalah salah ketik, sedangkan “komen” adalah bentuk percakapan sehari-hari yang tidak baku.
Kenapa ini layak dibahas di artikel teknis? Karena salah ejaan berdampak nyata saat kamu mencari solusi: mengetik “coment html” di mesin pencari atau di dokumentasi bisa membuatmu melewatkan hasil terbaik, dan menamai class atau file dengan ejaan salah (coment-box.css) akan membingungkan rekan setim. Di dunia kode, konsistensi ejaan itu bagian dari profesionalisme.
Panduan pemakaiannya:
- comment, istilah teknis universal; dipakai di dokumentasi, nama fitur editor (“Toggle Line Comment” di VS Code), dan percakapan antar developer.
- komentar, kata serapan baku; cocok untuk tulisan formal berbahasa Indonesia, seperti artikel ini.
- komen, santai, umum di percakapan (“kodenya dikomen dulu aja”), tidak masalah dalam obrolan, hindari di dokumentasi.
- coment / commet / komment, salah ketik semua; kalau menemukannya di kode proyekmu, perbaiki.
Istilah turunannya yang perlu kamu kenal: comment-out (menonaktifkan kode dengan tanda komentar), uncomment (mengaktifkan kembali), dan commented code (kode yang sedang dalam keadaan terkomentar).
Kesalahan Umum Saat Menulis Komentar
Lima kesalahan komentar yang paling sering terjadi: komentar bersarang, double-dash di dalam komentar, menyimpan informasi sensitif, komentar basi yang tidak diperbarui, dan kode mati yang dibiarkan terkomentar di produksi. Semuanya mudah dihindari kalau kamu tahu polanya, mari bedah satu per satu.
1. Komentar Bersarang (Nested Comment)
Kesalahan nomor satu. Kamu comment-out satu blok besar, tapi di dalamnya sudah ada komentar lain:
<!-- nonaktifkan section ini
<section>
<!-- judul section -->
<h2>Promo</h2>
</section>
-->
Penutup --> milik “judul section” mengakhiri komentar luar lebih awal. Akibatnya <h2>Promo</h2> dan teks --> sisanya justru tampil di halaman. Solusi: hapus komentar dalam sebelum membungkus, atau comment-out per bagian kecil.
2. Double-Dash di Dalam Komentar
Menulis -- beruntun di dalam komentar (misalnya sebagai garis pemisah dekoratif ------) invalid pada XML/XHTML, ditandai error oleh validator, dan berisiko menutup komentar lebih awal jika membentuk urutan penutup. Pakai karakter lain untuk dekorasi: ===== atau ***** sama cantiknya dan 100% aman.
3. Menyimpan Informasi Sensitif
Password, API key, catatan internal, URL admin, semuanya terbaca lewat view-source oleh siapa pun. Sudah kita bahas panjang di atas, tapi layak diulang karena ini kesalahan dengan konsekuensi paling mahal. Komentar bukan brankas; ia kartu pos.
4. Komentar Basi yang Tidak Diperbarui
Komentar yang tidak ikut diubah saat kodenya berubah lebih berbahaya daripada tidak ada komentar sama sekali:
<!-- tampilkan 3 produk unggulan -->
<section class="featured">
<!-- ...padahal sekarang isinya 6 produk dan logikanya sudah beda -->
</section>
Developer berikutnya percaya pada komentar, mengambil keputusan berdasarkan informasi salah, dan bug pun lahir. Aturannya: setiap mengubah kode, cek komentar di sekitarnya, perbarui atau hapus.
5. Kode Mati Terkomentar Permanen di Produksi
Comment-out itu alat sementara. Kode yang sudah tiga bulan terkomentar dan tidak ada rencana dihidupkan lagi sebaiknya dihapus, riwayatnya tetap aman di Git kalau suatu hari dibutuhkan. Kode mati yang menumpuk membuat file sulit dibaca, membingungkan (“ini masih dipakai atau tidak?”), dan di HTML tanpa proses build, ikut memperbesar ukuran file yang diunduh setiap pengunjung.
6. Salah Tanda Komentar Antar Bahasa
Bonus yang sering menimpa pemula: memakai tanda komentar HTML di dalam file CSS, atau // di dalam CSS murni. Tanda komentar tidak berlaku lintas bahasa, hafalkan tabel tiga bahasa di atas, atau serahkan pada Ctrl+/ yang selalu memilih tanda yang benar sesuai jenis file.
Kamu menulis catatan berisi password admin di dalam komentar HTML. Apakah pengunjung website bisa membacanya?
FAQ Seputar Comment di HTML
Comment adalah apa dalam HTML?
Comment (komentar) adalah catatan di dalam kode HTML yang diabaikan browser dan tidak ditampilkan di halaman web. Ia ditulis di antara penanda <!-- dan -->, dan fungsinya untuk dokumentasi, penanda bagian, serta menonaktifkan kode sementara. Komentar dibuat untuk dibaca manusia, bukan mesin.
Bagaimana tulisan comment yang benar di HTML?
Awali dengan <!--, tulis catatanmu, lalu akhiri dengan -->. Contoh: <!-- ini komentar -->. Yang perlu dihindari: komentar bersarang (komentar di dalam komentar), dua strip beruntun (--) di dalam isi komentar, dan meletakkan komentar di dalam tag. Spasi setelah pembuka dan sebelum penutup tidak wajib tapi dianjurkan.
Apa fungsi comment di HTML?
Tiga fungsi utama: (1) dokumentasi, menjelaskan alasan atau konteks kode untuk pembaca berikutnya; (2) penanda section, memetakan bagian-bagian file yang panjang agar mudah dinavigasi; (3) comment-out, menonaktifkan kode sementara tanpa menghapusnya, terutama saat debugging.
Bagaimana cara comment banyak baris sekaligus di HTML?
HTML tidak butuh sintaks khusus untuk multi-baris: satu penanda pembuka <!-- dan satu penutup --> boleh mengapit berapa pun baris di antaranya. Di editor, cara tercepatnya adalah blok semua baris yang diinginkan lalu tekan Ctrl+/ (Mac: Cmd+/), VS Code membungkusnya otomatis.
Apakah comment terlihat oleh pengunjung website?
Di halaman yang dirender: tidak. Tapi di kode sumbernya: ya, siapa pun bisa membacanya lewat menu “View Page Source” (Ctrl+U) atau DevTools. Karena itu jangan pernah menyimpan password, API key, atau informasi internal di komentar HTML.
Bagaimana cara cepat memberi comment di VS Code?
Tekan Ctrl+/ (Windows/Linux) atau Cmd+/ (Mac) untuk toggle komentar pada baris aktif atau seleksi, tekan lagi untuk uncomment. Shortcut ini otomatis memakai tanda komentar yang sesuai bahasa file: tanda komentar HTML di file .html, /* */ di .css, dan // di .js. Ada juga Shift+Alt+A untuk block comment.
Langkah Selanjutnya
Sekarang kamu sudah pegang semuanya: arti comment, tulisan yang benar dan yang salah, tiga fungsi utamanya, shortcut Ctrl+/, tanda komentar di CSS dan JavaScript, plus daftar jebakan yang harus dihindari. Yang tersisa, seperti biasa, adalah membiasakannya: mulai beri penanda section di file HTML-mu, tulis TODO untuk hal yang tertunda, dan pakai comment-out setiap kali debugging.
Kalau mau latihan yang terstruktur dengan editor langsung di browser, lanjutkan ke lesson komentar di seri HTML Hyper Sheets, lalu naik level ke prinsip berkomentar ala clean code begitu kamu mulai menulis proyek yang lebih besar. Dan kalau kamu sedang meniti jalur belajar dari nol, panduan belajar HTML untuk pemula memetakan langkah lengkapnya. Selamat ngoding, dan jangan lupa: tulis komentarmu seolah-olah dibaca orang lain, karena suatu hari pasti benar-benar dibaca.