Di tengah deretan kode pengembangan web yang kompleks, ada satu alat yang memiliki kekuatan untuk memudahkan pekerjaan sehari-hari: comment HTML.

Comment HTML memfasilitasi developer untuk bisa berbicara langsung kepada developer lain, menjelaskan kode, menyimpan catatan, sampai menyembunyikan atau menonaktifkan elemen yang tidak diperlukan.

Meskipun comment HTML menjadi bagian dari kode yang tidak akan dijalankan di browser, elemen ini tak kalah penting untuk dipelajari. Mengapa demikian? Mari kita bahas lebih lanjut.

Mengapa Komentar Diperlukan dalam Kode HTML?

Komentar dalam kode HTML atau comment HTML berfungsi sebagai penanda atau catatan dalam kode yang membantu dalam pemeliharaan dan kolaborasi dalam pengembangan web.

Misalnya, ketika bekerja dalam tim, komentar akan membantu anggota tim lain memahami apa yang telah kamu kerjakan. Menulis comment HTML secara jelas membuat kamu dan rekan tim memahami bagian mana dari kode yang perlu melakukan tugas spesifik.

Konsep dan tujuan dari comment HTML sebenarnya sederhana. Fitur ini berguna sebagai panduan atau petunjuk tambahan dalam kode yang membantu kamu dan developer lain memahami kode lebih cepat.

Selain itu, comment HTML juga berguna dalam menjelaskan bagian penting dari kode kepada developer lain. Mungkin ada bagian kode yang kompleks atau perlu penjelasan tambahan. Dengan menambahkan comment HTML, kamu dapat menjelaskan apa yang dilakukan bagian tersebut dari kode, sehingga membuatnya lebih mudah dipahami.

Meski demikian, perlu dipahami bahwa dalam lingkungan production, tidak boleh ada comment apapun. Comment hanya boleh ada di staging atau branch development saja agar bisa memastikan efisiensi dan keamanan kode saat dijalankan dalam environment yang sesungguhnya.

Cara Membuat Komentar HTML

Membuat komentar dalam HTML cukup mudah. Kamu hanya perlu memasukkan sintaks Komentar HTML yang tepat.

Jika kamu ingin menambahkan komentar yang hanya satu baris, kamu bisa menggunakan sintaks berikut:

Apa yang ditulis di antara < !-- dan – > adalah komentar dan tidak akan ditampilkan di browser.

Contoh:

Sementara untuk menambahkan komentar yang terdiri dari beberapa baris, kamu tetap menggunakan sintaks yang sama. Kamu langsung bisa menulis teks komentarmu dalam beberapa baris di antara <!-- dan -->.

Contoh:

Tujuan Umum Penggunaan Komentar di HTML

Ada beberapa tujuan dari penggunaan comment HTML, termasuk:

#1 Menjelaskan kode

Komentar HTML sering digunakan untuk menjelaskan bagian tertentu dari kode. Misalnya, jika kamu memiliki elemen HTML yang kompleks atau fungsi yang rumit, kamu dapat menggunakan komentar untuk menjelaskan tujuan atau fungsi dari elemen atau kode tersebut.

Contoh:

Dalam contoh ini, komentar memberi penjelasan bahwa bagian kode berikut adalah navigasi utama dari website.

#2 Menyembunyikan bagian kode

Komentar HTML juga dapat dipakai untuk menyembunyikan bagian kode. Fungsi ini bisa berguna jika kamu ingin menonaktifkan sementara bagian tertentu dari kode tanpa menghapusnya.

Contoh:

Dalam contoh di atas, elemen di dalam komentar akan disembunyikan oleh browser dan tidak akan ditampilkan pada audiens.

#3 Menyimpan to-do list

Komentar HTML juga berfungsi sebagai to-do list, yaitu catatan tentang apa yang harus dikerjakan dalam bagian HTML tertentu.

Contoh:

Di atas adalah cara yang efisien untuk menandai apa yang perlu dikerjakan nanti dalam pengembangan website.

{{COMPONENT_IDENTIFIER}}

#4 Memperlancar diskusi

Dalam pengembangan web kolaboratif, komentar HTML membantu diskusi antar tim developer. Misalnya, kamu bisa menggunakan komentar untuk meminta feedback atau memberi tahu tim tentang perubahan yang telah dibuat.

Cara Cepat Membuat Komentar di HTML

Membuat komentar di HTML adalah hal yang umum dilakukan oleh web developer.

Selain menggunakan sintaks dasar < !-- Komentar di sini – >, ada juga cara cepat atau pintasan yang bisa kamu gunakan untuk membuat komentar, terutama jika kamu menggunakan beberapa text editor populer.

Sebagian besar text editor seperti Visual Studio Code, Sublime Text, atau Atom menawarkan pintasan keyboard untuk membantu kamu dengan cepat mengubah baris kode menjadi komentar.

Contoh pintasan (shortcuts) untuk membuat komentar HTML:

• Visual Studio Code: kamu bisa menyoroti teks yang ingin dikomentari, kemudian tekan Ctrl + / (Windows) atau Cmd + / (Mac).
• Sublime Text: metode yang sama berlaku untuk Sublime Text. Cukup highlight dan tekan Ctrl + / (Windows) atau Cmd + / (Mac).
• Atom: di Atom, kamu juga bisa menggunakan pintasan yang sama.

Shortcut di atas akan otomatis mengubah teks yang disoroti menjadi komentar HTML. artinya, teks tersebut akan ditempatkan di antara < !-- dan – >.

Kemudahan ini tidak hanya meningkatkan kecepatan kerja tetapi juga membuat proses pengembangan menjadi lebih lancar.

FAQ (Frequently Ask Question)

Apakah comment HTML memengaruhi kecepatan loading halaman?

Secara umum, comment HTML tidak memiliki dampak signifikan terhadap kecepatan loading halaman jika hanya terdiri dari 1-2 baris.

Namun, jika ada banyak baris komentar, line pada HTML juga akan bertambah. Pada gilirannya, hal ini mengakibatkan pengurangan kecepatan load karena browser membaca semua line yang ditulis dalam HTML.

Jadi, meskipun dampaknya mungkin minimal, penggunaan komentar dalam jumlah besar secara teoritis dapat mengurangi kecepatan load page.

Bisakah menambahkan comment HTML dalam CSS atau JavaScript?

Sintaks comment HTML khusus untuk HTML.

Untuk CSS, kamu bisa menggunakan / * Komentar di sini * /. Sementara untuk JavaScript, kamu bisa menggunakan // Komentar di sini untuk komentar satu baris atau / * Komentar di sini * / untuk komentar multi-baris.

Apakah comment HTML memengaruhi SEO?

Comment HTML tidak secara langsung memengaruhi SEO (Search Engine Optimization) sebuah website. Meskipun search engine dapat komentar dalam kode sumber, kode tersebut biasanya diabaikan dalam proses indeksasi dan peringkat.

Penutup

Comment HTML menawarkan banyak fungsi untuk developer, seperti memberikan penjelasan tentang kode, menyembunyikan bagian kode yang tidak diperlukan, menyimpan daftar tugas, dan memfasilitasi kolaborasi antara tim.

Melalui penggunaan shortcut dalam editor teks, kamu bisa membuat komentar dengan cepat. Semua aspek ini menjadikan comment HTML bagian penting dari praktik pengembangan web yang efektif.