Dalam pemrograman, yang namanya komentar sering digunakan sebagai catatan. Catatan ini bisa berupa informasi tambahan atau dokumentasi singkat dari suatu baris kode dan lain sebagainya.
Dalam HTML, komentar merupakan suatu elemen yang diabaikan oleh browser artinya ia tidak akan ditampilkan pada browser.
Bagaimana Membuat Komentar?
Berikut sintaks untuk membuat komentar:
<!-- Ini namanya komentar -->Keluaran:
Komentar yang ditulis tidak akan ditampilkan di browser, namun meskipun begitu kita masih bisa melihatnya melalui menu inspect element.
Atau melalui menu page source
Apa Fungsi Komentar?
Meskipun komentar tidak ditampilkan di browser dan tidak mempengaruhi kode sama sekali. Namun nyatanya komentar sangat berpengaruh pada pekerjaan kita dan kegunaannya tidak bisa dianggap sepele.
Berikut beberapa fungsi dari komentar yang sangat berguna bagi kita.
Komentar Untuk Memberikan Informasi
Sudah dijelaskan sebelumnya bahwa komentar dapat digunakan sebagai catatan berisi informasi tambahan atau dokumentasi dari suatu elemen atau baris kode.
Berikut contoh penerapannya
<!DOCTYPE html> <html> <!-- Tag untuk membuat dokumen HTML--> <head> <title>Halaman Depan</title> <!-- Tag untuk membuat judul halaman--> </head> <body> <h1>Halo Dunia</h1> <!-- Tag untuk membuat judul konten -- Contoh lain: Judul konten sementara berjudul Halo Dunia --> <p>Belajar membuat website itu menyenangkan!</p> <!-- Tag untuk membuat paragraf Contoh lain: Konten berisi penjelasan mengenai website --> </body> </html>Komentar Untuk Membuat Todo List
Untuk mengingat apa yang harus dikerjakan besok kita dapat membuat todo list pada bagian terkait, todo list ini tidak boleh mengganggu jalannya program, maka dari itu penggunaan komentar bisa sangat menguntungkan di sini.
<!DOCTYPE html> <html> <head> <title>Halaman Depan</title> <!-- TODO: Tambahkan tag meta di sini --> </head> <body> <h1>Halo Dunia</h1> <!-- TODO: Tambahkan konten di sini--> </body> </html>Komentar Untuk Menonaktifkan Baris Kode
Komentar tidak hanya bisa menyembunyikan suatu teks agar tidak ditampilkan pada browser, ia juga dapat menyembunyikan atau menonaktifkan suatu baris kode.
Pada artikel ini kamu akan mempelajari bagaimana cara menambahkan komentar baris-tunggal dan komentar multi-baris ke dalam dokumen HTML.
Kamu juga akan melihat mengapa menambahkan komentar dianggap sebagai praktik penulisan yang baik saat menulis kode HTML.
Mari kita mulai!
Tag Komentar HTML
Sintaks umum komentar HTML adalah seperti beriku:
<!-- Aku adalah komentar! -->Komentar di HTML diawali dengan <!-- dan diakhiri dengan -->.
Jangan lupa menambahkan tanda seru di awal tag! Tapi kamu tidak perlu menambahkannya di akhir tag.
Tag komentar mengelilingi teks atau tag HTML yang ingin dikomentari.
Kapan Sebaiknya Menggunakan Komentar HTML
Komentar HTLM tidak ditampilkan di browser. Ini berarti setiap komentar yang kamu tambahkan ke kode sumber HTML tidak akan ditampilkan saat dokumen dirender di browser.
Karena itu, perlu diingat bahwa setiap orang dapat melihat kode sumber dari hampir semua situs web yang dipublikasikan di internet dengan membuka View -> Developer -> View Source – termasuk komentar di dalamnya.
Jadi komentarmu akan terlihat oleh orang lain jika kamu membuat dokumen HTML bersifat public.
Menulis komentar sangat membantu dan merupakan praktik yang baik untuk diterapkan saat menulis kode sumber. Komentar membantumu mendokumentasikan dan mengkomunikasikan kode yang kamu tulis serta proses berpikir kepada dirimu sendiri (dan orang lain). Komentar juga dapat mengingatkanmu mengenai apa yang kamu pikirkan/lakukan saat kamu kembali ke sebuah proyek setelah berbulan-bulan tidak mengerjakannya.
Komentar juga membantumu berkomunikasi dengan pengembang lain yang bekerja pada suatu proyek denganmu. Komentarmu dapat menjelaskan kepada mereka kenapa kamu menambahkan baris kode tertentu.
Cara Komentar Baris-Tunggal di HTML
Komentar baris-tunggal hanya mencakup satu baris saja. Seperti disinggung sebelumnya, baris tersebut tidak akan ditampilkan pada browser.
Gunakan komentar baris-tunggal saat kamu ingin menjelaskan dan memperjelas tujuan dari kode yang mengikutinya atau saat kamu ingin menambahkan pengingat untuk dirimu sendiri seperti berikut:
<!DOCTYPE html> <html lang="id"> <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>Document</title> </head> <body> <!-- Tambahkan navbar di sini--> <h2>Tentangku</h2> <p>Aku belajar kode dengan freeCodeCamp.</p> <p>Aku akan melalui setiap sertifikasi mereka yang luar biasa dan sangat membantu.</p> <p>Aku sedang dalam proses untuk menjadi pengembang web fullstack.</p> <h3>Pengalaman Kerja</h3> </body> </html>Komentar baris-tunggal juga sangat berguna saat kamu ingin memperjelas di mana suatu tag berakhir. Ini sangat berguna dalam dokumen HTML yang panjang dan rumit di mana banyak hal terjadi dan kamu mungkin bingung di mana letak tag penutup.
Cara Menulis Komentar Inline di HTML
Kamu juga bisa menambahkan beberapa komentar di tengah kalimat atau baris kode.
Hanya teks di dalam <!-- --> yang akan dikomentari, dan teks lain di dalam tag tidak akan terpengaruh.
<!DOCTYPE html> <html lang="id"> <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>Document</title> </head> <body> <p>Aku <!--akan menjadi--> seorang pengembang web</p> </body> </html>Cara Menulis Komentar Multi-Baris di HTML
Komentar juga dapat mencakup beberapa baris dengan menggunakan sintaks yang sama dengan yang sudah dibahas sebelumnya.
<!DOCTYPE html> <html lang="id"> <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>Document</title> </head> <body> <p>Aku adalah seorang pengembang web</p> <!--Ini akan menjadi portfolioku. Aku akan menampilkan proyek-proyek yang paling aku banggakan. Aku dapat terus menambahkan tentang apa saja yang ingin ditambahkan karena aku menulis menggunakan komentar multi-baris di sini.--> </body> </html>Cara Mengomentari Tag di HTML
Jadi bagaimana jika kamu ingin mengomentari sebuah tag di HTML?
Bungkus tag yang kamu inginkan di dalam <!-- --> seperti berikut:
!DOCTYPE html> <html lang="id"> <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>Document</title> </head> <body> <h2>Halaman portfolioku</h2> <h3>proyek sertifikasi freeCodeCamp</h3> <!-- <section class="hero"> </section> --> <h2>Tentangku</h2> </body> </html>Mengomentari suatu tag membantumu saat proses mencari kesalahan (debugging).
Saat sesuatu tidak bekerja sebagaimana mestinya atau tidak sesuai keinginanmu, cobalah komentari tag satu per satu. Hal ini dapat digunakan untuk menguji baris-baris tersebut dan menemukan bagian mana yang menyebabkan masalah.
Shortcut Keyboard untuk Menambahkan Komentar HTML
Ada shortcut yang dapat kamu gunakan untuk mengambah komentar - dan mungkin kamu akan sering menggunakannya. Shortcut-nya adalah <!DOCTYPE html> <html lang="id"> <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>Document</title> </head> <body> <!-- Tambahkan navbar di sini--> <h2>Tentangku</h2> <p>Aku belajar kode dengan freeCodeCamp.</p> <p>Aku akan melalui setiap sertifikasi mereka yang luar biasa dan sangat membantu.</p> <p>Aku sedang dalam proses untuk menjadi pengembang web fullstack.</p> <h3>Pengalaman Kerja</h3> </body> </html> 1 untuk pengguna Mac atau <!DOCTYPE html> <html lang="id"> <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>Document</title> </head> <body> <!-- Tambahkan navbar di sini--> <h2>Tentangku</h2> <p>Aku belajar kode dengan freeCodeCamp.</p> <p>Aku akan melalui setiap sertifikasi mereka yang luar biasa dan sangat membantu.</p> <p>Aku sedang dalam proses untuk menjadi pengembang web fullstack.</p> <h3>Pengalaman Kerja</h3> </body> </html> 2 untuk pengguna Windows dan Linux.
Untuk menambahkan komentar baris-tunggal, tekan kombinasi tombol di atas dalam kode editor pada baris yang ingin dikomentari. Kemudian seluruh baris akan dikomentari. Perlu diingat bahwa karena semuanya akan dikomentari pada baris tersebut, metode ini hanya berfungsi untuk komentarbaris-tunggal. Anda harus menambahkan komentar inline secara manual.
Untuk menambahkan komentar multi-baris, pilih dan sorot semua teks atau tag yang ingin dikomentari dan tekan kombinasi tombol yang ditunjukkan sebelumnya. Setiap baris yang kamu pilih sekarang akan memiliki komentar.
Kesimpulan
Dan begitulah - sekarang kamu tahu bagaimana dan mengapa menggunakan komentar di HTML!
Pelajari lebih lanjut mengenai HTML dengan menonton video-video di channel Youtube freeCodeCamp:
- HTML Tutorial - Website Crash Course for Beginners
- HTML Full Course - Build a Website Tutorial
freeCodeCamp juga menyediakan setifikasi gratis berbasis proyek pada Responsive Web Design.
Ini sangat ideal untuk pemula dan tidak memerlukan pengetahuan sebelumnya. Kamu akan memulai dari hal yang benar-benar dasar dan tingkatkan kemampuanmu seiring waktu. Di akhir kamu akan menyelesaikan lima buah proyek.
Terima kasih sudah membaca dan selamat belajar :)
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Learning something new everyday and writing about it Hi :)
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started