Badoy Studio

cara membuat komentar di html

Halo semuanya, pada artikel ini badoystudio akan memberikan tutorial bagaimana cara membuat komentar di HTML. Ingin tahu selengkapnya seperti apa? Simak selengkapnya sekarang juga.



Memahami Cara Penggunaan Komentar pada HTML

Sebelum kita bahas ke cara membuat komentar di HTML, harus dipahami bahwa komentar yang dimaksud bukanlah fitur komentar yang terdapat seperti di media sosial ataupun blog seperti gambar berikut :

Sumber : Blogspot.com

Melainkan komentar yang berupa catatan pada dokumen HTML yang kita buat. Catatan di sini bisa berupa :

  • Deskripsi singkat suatu kode
  • Memberikan rekomendasi kode
  • Atau bisa juga digunakan untuk melakukan hide pada kode HTML

Catatan atau komentar yang dibuat pada HTML nantinya tidak akan dibaca oleh web browser, sehingga user yang melihat website tidak akan melihat catatan tersebut. Oiya, fungsi utama komentar pada HTML yaitu agar kode – kode yang sudah ditulis bisa mudah untuk dibaca oleh orang lain.

Cara Membuat Komentar di HTML dengan Mudah

Cara membuat komentar di HTML sangat mudah, kita hanya perlu tahu tag HTML nya dan cara penggunannya.

Tag untuk Menulis Komentar di HTML

Tag yang digunakan untuk menuliskan komentar atau catatan pada dokumen HTML yaitu :

<!--- ini adalah komentar -->
  • <!– adalah Tag awal yang harus ditulis
  • Setelah tag tersebut silahkan isikan catatan atau komentar
  • Lalu akhiri dengan tag –>

Untuk lebih jelasnya silahkan cek contoh berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Komentar di HTML</title>
    </head>
    <body>
        <!-- tag berikut digunakan untuk membuat judul -->
        <h1>Tutorial Membuat Komentar di HTML</h1>

        <!-- tag berikut digunakan untuk membuat paragraf-->
        <p>Catatan atau komentar tidak akan ditampilkan pada browser</p>
    </body>
</html>

Pada kode HTML di atas saya memberikan komentar di antara tag judul dan juga paragraf. Di mana komentar tersebut memberikan deskripsi singkat tentang fungsi dari tag tersebut. Dan catatan yang dibuat pada tag komentar tidak akan ditampilkan pada browser. Seperti gambar berikut :

cara membuat komentar di html
Sumber : Dok. Pribadi

Di bawah ini kita akan membahas lebih jauh penggunaan tag komentar pada HTML.

Penggunaan Komentar Satu Baris pada HTML

Komentar satu baris biasanya digunakan untuk mendeskripsikan fungsi atau tujuan kode HTML. Atau bisa juga kita gunakan untuk pengingat pada diri sendiri atau orang lain mengenai penambahan kode. Contohnya seperti berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Komentar di HTML</title>
    </head>
    <body>

        <!-- tag berikut digunakan untuk membuat judul -->
        <h1>Tutorial Membuat Komentar di HTML</h1>

        <!-- tag berikut digunakan untuk membuat paragraf-->
        <p>Catatan atau komentar tidak akan ditampilkan pada browser</p>

        <!-- Jangan lupa tambahkan list di sini-->
    </body>

</html>

Di atas kita menambahkan catatan supaya ditambahkan juga kode HTML untuk membuat list.

Komentar satu baris juga bisa kita gunakan untuk memperjelas mana tag berakhir. Ini sangat berguna jika kode-kode HTML nya cukup panjang dan kompleks, sehingga terdapat banyak akhiran suatu tag dan membuat kita bingung di mana suatu tag penutup. Contohnya penggunannya seperti berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Komentar di HTML</title>
    </head>
    <body>
        <table class="tabel-daftar-nilai-kelas1">
        </table> <!-- tag penutup tabel daftar nilai kelas 1-->
   
    </body>
</html>

Komentar di atas menjelaskan bahwa penutup tag tabel tersebut adalah untuk tabel daftar nilai kelas 1.

 

Penggunaan Komentar HTML di Antara Suatu Tag

Kita juga bisa menambahkan komentar di tengah kalimat atau suatu baris kode HTML. Contohnya seperti berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Komentar di HTML</title>
    </head>
    <body>
         <p> Saya  <!-- selalu berusaha menjadi --> orang baik</p>
     
    </body>
</html>

Perhatikan contoh di atas, komentar saya selalu berusaha berada di dalam tag paragraf. Tulisan yang ditampilkan pada browser tetap “saya orang baik”.

Penggunaan Komentar Beberapa Baris di HTML

Kalau contoh di atas kita membuat komentar hanya satu baris saja, ternyata catatan atau komentar di HTML bisa kita buat beberapa baris. Contohnya seperti berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Komentar di HTML</title>
    </head>
    <body>   

        <!-- Jangan lupa tambahkan tag h1,h2
        paragraf yang berisi deskripsi
        juga tag untuk membuat tabel yang terdiri dari 5 baris, dan 2 kolom-->     

    </body>
</html>

Cara membuat catatan seperti di atas tinggal di enter saja. Jadi, tidak harus membuat komentar satu baris-satu baris jika banyak, langsung saja buat seperti contoh di atas.

Penggunaan Komentar untuk Menyembunyikan Elemen HTML

Tag komentar juga bisa kita gunakan untuk menyembunyikan sementara kode HTML. Contohnya seperti berikut ini :

<!DOCTYPE html>
<html>
    <head>
        <title>Komentar di HTML</title>
    </head>
    <body>

        <h1> Daftar Nilai Siswa Kelas X</h1>
        <p> Berikut adalah daftar nilai kelas X pada semester 1</p>

        <!--<table class="tabel-daftar-nilai-kelas1">
            </table>
         -->
 
    </body>
</html>

Di atas kita menyembunyikan sementara element tabel dengan menggunakan tag komentar pada HTML. Jika nanti tabel tersebut sudah dibuat tinggal hapus saja tag komentarnya.

Shortcut atau Cara Cepat Membuat Komentar di HTML

Untuk mempercepat kita membuat atau menulis komentar pada HTML, kita bisa menggunakan shortcut atau tombol kombinasi berikut ini  :

  • CTRL + / jika menggunakan VS Code di OS Windows
  • Command + / jika menggunakan MacOs

Manfaat Komentar pada HTML

Dari contoh dan penjelasan di atas kita bisa menyimpulkan jika komentar memiliki kegunaan, di antaranya yaitu :

  • Memberikan penjelasan mengenai suatu kode HTML yang ditulis.
  • Mempermudah orang lain yang satu tim saat membaca dan meneruskan kode HTML.
  • Menyembunyikan tag HTML yang belum lengkap atau untuk melakukan update.
  • Berguna untuk membuat to do list supaya kita tahu kode HTML apa selanjutnya yang harus ditulis.

Komentar di CSS dan Juga PHP

Penggunaan dan penulisan komentar pada CSS dan PHP tentu saja berbeda dengan HTML ya. Selanjutnya kita akan membahas materi tersebut.



Penutup

Itulah ulasan singkat mengenai cara membuat komentar di HTML. Sangat mudah bukan? Untuk melihat hasilnya seperti apa, silahkan kamu praktekan sendiri. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga.

Sumber gambar utama : https://tutorial.eyehunts.com/

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.