Install Web App

BRIEF

MINA

HTML

Belajar HTML #17 | Cara Menambahkan Komentar di HTML

profil-penulis

Pra Esty Latifa Qolbi

23 Januari 2025

1. Struktur Komentar di HTML

Komentar di HTML ditulis dengan menggunakan tag khusus yang dimulai dengan <!-- dan diakhiri dengan -->. Apapun yang ada di antara tanda tersebut akan dianggap sebagai komentar dan tidak akan ditampilkan pada halaman web ketika dilihat oleh pengguna.

Contoh Struktur Komentar:

<!-- Ini adalah komentar -->

2. Tujuan Penggunaan Komentar

Komentar di HTML memiliki berbagai tujuan yang penting dalam pengembangan web. Beberapa di antaranya adalah:

  • Memberikan Penjelasan: Komentar dapat digunakan untuk menjelaskan bagian kode, baik itu untuk pengembang lain atau untuk diri sendiri di masa depan. Ini mempermudah pemahaman kode.

    Contoh:

    <!-- Menampilkan judul utama pada halaman -->
<h1>Selamat datang di situs kami!</h1>

     

  • Menyembunyikan Kode: Komentar juga dapat digunakan untuk sementara waktu menonaktifkan bagian kode tanpa harus menghapusnya. Misalnya, jika kamu ingin menguji bagian lain dari halaman tanpa menghapus kode tersebut, kamu bisa menandainya sebagai komentar.

    Contoh:

    <!-- <p>Paragraf yang tidak ingin ditampilkan saat ini</p> -->

     

  • Menyertakan Catatan atau TODO: Pengembang sering menggunakan komentar untuk menambahkan catatan seperti tugas yang belum selesai atau ide yang perlu dikerjakan di masa depan.

    Contoh:

    <!-- TODO: Perbaiki desain halaman ini -->

     

3. Komentar yang Dapat Memuat Banyak Baris

Komentar di HTML bisa memuat satu baris atau lebih dari satu baris. Jika komentar lebih panjang, kamu cukup menulisnya di beberapa baris.

Contoh Komentar Multi-Baris:

<!--
    Ini adalah komentar yang terdiri dari beberapa baris.
    Komentar ini bisa menjelaskan bagian yang lebih kompleks
    atau memberikan instruksi lebih rinci.
-->

 

4. Cara Menambahkan Komentar di Berbagai Tempat

Komentar dapat diletakkan di berbagai bagian HTML, baik itu di dalam <head>, <body>, atau bagian lain dari dokumen HTML.

Contoh di Bagian <head>:

<head>
    <!-- Menyertakan file CSS untuk styling halaman -->
    <link rel="stylesheet" href="style.css">
</head>

Contoh di Bagian <body>:

<body>
    <h1>Selamat datang di halaman utama</h1>
    <!-- Paragraf berikut menjelaskan lebih lanjut tentang situs ini -->
    <p>Situs ini memberikan informasi terbaru tentang teknologi.</p>
</body>

5. Pentingnya Komentar dalam Kolaborasi

Komentar sangat membantu dalam pengembangan proyek yang melibatkan banyak orang. Mereka memungkinkan pengembang untuk memberi penjelasan tentang fungsi dan tujuan dari berbagai bagian kode, sehingga anggota tim lain bisa dengan mudah memahami dan mengelola kode tersebut.

Contoh Komentar untuk Kolaborasi:

<!-- 
    Pengaturan navbar di bawah ini, jangan ubah jika tidak perlu,
    karena ini akan mempengaruhi tampilan navigasi di seluruh situs.
-->
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

6. Hal yang Harus Diperhatikan

  • Komentar Tidak Akan Tampil di Browser: Seperti yang sudah dijelaskan sebelumnya, isi komentar tidak akan terlihat oleh pengguna di browser. Ini berarti komentar hanya digunakan untuk kepentingan pengembang.

  • Jangan Menggunakan Komentar Terlalu Banyak: Terlalu banyak komentar dalam kode bisa membuat kode menjadi sulit dibaca. Gunakan komentar secukupnya dan hanya ketika benar-benar diperlukan.

  • Jangan Menggunakan Komentar untuk Menyembunyikan Kode Sensitif: Meskipun komentar bisa menyembunyikan kode dalam tampilan halaman, kode tersebut masih bisa diakses dan dilihat oleh orang lain yang mengakses kode sumber halaman. Jika ada informasi sensitif, sebaiknya jangan menaruhnya di dalam komentar HTML.

7. Komentar dalam HTML Tidak Boleh Bersarang

Komentar dalam HTML tidak bisa bersarang atau berada di dalam komentar lain. Jadi, jika kamu menulis komentar di dalam komentar, itu akan menyebabkan kesalahan atau ketidakterbacaan dalam kode.

Contoh Salah:

<!-- Ini adalah komentar yang salah <!-- Ini adalah komentar dalam komentar --> -->

 komentar yang benar:

<!-- Ini adalah komentar -->

8. Menggunakan Komentar untuk Debugging

Komentar juga bisa digunakan untuk debugging. Jika kamu ingin menonaktifkan sementara bagian kode yang tidak bekerja dengan benar, kamu bisa menambahkannya sebagai komentar dan memeriksa kembali tanpa menghapusnya.

Contoh Debugging:

<!-- <h2>Bagian yang bermasalah dan perlu diperbaiki</h2> -->

Contoh penggunaan komentar di HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Komentar di HTML</title>
</head>
<body>

    <!-- Ini adalah komentar tentang judul halaman -->
    <h1>Selamat datang di situs kami!</h1>

    <!-- Komentar ini menjelaskan bagian berikutnya -->
    <p>Ini adalah paragraf pertama.</p>

</body>
</html>

Berikut hasilnya saat dibuka di browser:

Artikel Lainnya Dengan Kategori Terkait :

1. 5 HTML Tags For Accessibility

2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula

3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML

4. Belajar HTML #03 | Membuat Heading di HTML

5. Belajar HTML #04 | Format Text di HTML

6. Belajar HTML #05 | Membuat Paragraf di HTML

7. Belajar HTML #06 | Membuat Tabel Pada HTML

8. Belajar HTML #07 | Membuat Link Pada HTML

9. Belajar HTML #08 | Cara Membuat List Di HTML

10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)

11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML

12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML

13. Belajar HTML #12 | Cara Membuat Form Pada HTML

14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML

15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS

16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.

17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML

18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML

19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML

20. Buat Desain Web Responsif CSS

21. Cara Membuat Accordions Dengan HTML & CSS

22. Cara Membuat Favicon Dengan HTML

23. CSS Positioning

24. Hal-hal Keren Dalam HTML

25. How to make Card-Profile

26. Input HTML Yang Perlu Diketahui

27. Memahami Pentingnya Semantic HTML dalam Struktur Website

28. Membuat Form HTML dengan Input Sugestion

29. Penggunaan Atribut Elemen Anchor dalam HTML

30. Semantic HTML

31. Tag HTML yang Jarang Diketahui

32. Tips Praktis Membuat Berbagai Jenis HTML List

33. Trik Berguna Dalam HTML

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya