Bagaimana cara membuat komentar di html?

Komentar pada HTML adalah potongan kode yang digunakan untuk menjelaskan kode-kode yang sedang ditulis dalam menyusun halaman HTML. Komentar ini akan diabaikan oleh browser dan tidak akan ditampilkan pada halaman HTML. Pada halaman HTML dengan kode yang panjang dan kompleks kadang membingungkan dalam menganalisanya. Pemberian komentar akan memberikan kemudahan dalam memahami alur kode yang sedang dikerjakan.

Table of Contents Show

Cara Membuat Komentar di HTML
Komentar Valid vs Invalid
Komentar Multiline
Komentar Bersyarat
Menggunakan Tag <coment>
Komentar dalam Kode Script
Komentar Dalam Sylesheet
Apa itu komentar pada HTML?
Bagaimana cara menuliskan komentar pada file HTML dan CSS?
Bagaimana cara menambahkan komentar di javascript?

Penulisan komentar pada HTML diawali dengan tag pembuka . Kode-kode HTML baik itu berupa elemen, tag, teks dan lainnya yang terletak di antara tag akan diabaikan oleh browser dan tidak akan ditampilkan pada halaman HTML. Penulisan komentar ini bersifat multi baris yang artinya setelah tag pembuka . Tidak peduli berapa baris kode yang sudah dilewati.

Komentar Untuk Single Line :

Komentar pada single line sering digunakan untuk memberi tanda komentar pada baris tertentu saja. Biasanya komentar ini ditulis dengan singkat pada baris yang bersangkutan.

Berikut ini contoh penulisan komentar HTML untuk baris tunggal :

Penulisan Komentar HTML Tunggal

Ini adalah paragraf 1

Ini adalah paragraf 2

Ini adalah paragraf 3

Ini adalah paragraf 4

Pada kode di atas, komentar dibuka pada awal paragraf pertama. Namun komentar ditutup pada awal paragraf yang ke-5 dengan melewati beberapa baris kode HTML. Komentar inilah yang disebut dengan komentar multi baris. Kode HTML yang berada di dalam komentar multi baris tidak akan dieksekusi dan diabaikan oleh web browser. Jika dijalankan pada browser, hasilnya seperti gambar dibawah ini :

Seperti pada bahasa pemograman lainnya, umumnya kita akan sering lupa tentang cara kerja kode yang kita buat sendiri setelah beberapa bulan berikutnya. Untuk mengatasinya, kita bisa akan menyisipkan penjelasan pada sebuah komentar di sekitar kode tersebut. HTML juga mempunyai tag khusus untuk komentar. Dalam tutorial belajar HTML: cara menambahkan komentar di HTML ini kita akan membahasnya lebih dalam.

Cara Membuat Komentar di HTML

Untuk membuat komentar di HTML, kita menggunakan awalan <!– dan penutup –>. Agar lebih mudah dipahami, langsung saja kita simak dalam bentuk contoh. Silahkan tulis kode HTML berikut dan save sebagai komentar.html

Contoh penggunaan tag komentar HTML:

<!DOCTYPE html >
<html>
<head>
   <title>Belajar Tag Komentar (comment)</title>
</head>
<body>
   <!-- <p>Ini berada di dalam tag komentar, 
           dan tidak akan tampil di browser</p> -->
   <p>Ini bukan komentar, dan akan tampil di browser</p>
</body>
</html>

Dari contoh dapat dilihat bahwa tag pembuka komentar adalah <!– dan tag penutup –>.

Tag komentar ini juga akan berlaku selama belum di temukan tag penutup. Contohnya dapat dilihat dari kode berikut:

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Tag Komentar (comment)</title>
</head>
<body>
   <!-- <p>Ini berada di dalam tag komentar, 
           dan tidak akan tampil di browser</p>
   <p>Ini juga tidak tampil di browser</p>
    -->
   <p>Ini bukan komentar, dan akan tampil di browser</p>

   <!--<p>Ini juga tidak tampil di browser</p> -->

</body>
</html>

Selain sebagai pengingat atau catatan, tag komentar juga akan berguna untuk membuat sebagian isi web tidak tampil untuk sementara. hal ini sangat berguna jika kita ingin mencoba berbagai tampilan kode HTML yang akan dibuat, tetapi tidak ingin menghapus kode sebelumnya.

eBook HTML Uncover Duniailkom

Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Pada artikel sebelumnya kita sudah mempelajari Tutorial Belajar HTML5 Bagian 8 : Pengertian & Fungsi Tag Meta Pada HTML, selanjutnya kita akan membahas bagaimana cara memberikan komentar dalam kode HTML yang kita buat.

Komentar adalah kode yang diabaikan oleh browser web apapun. Menambahkan kode komentar dalam kode HTML berfungsi sebagai catatan bagi programmer, terutama jika dokumen yang Anda tuliskan sangat kompleks.

Anda bisa memberikan kode komentar, sebagai penanda, untuk menunjukkan bagian dari dokumen, dan catatan bagi siapapun yang membaca kokde tersebut.

Komentar membantu Anda dan orang lain memahami kode yang Anda tulis dan meningkatkan keterbacaan kode.

Komentar HTML ditempatkan di antara tag <! – … ->.

Jadi, konten apa pun yang ditempatkan diantara tag-in <! – … -> akan diperlakukan sebagai komentar dan akan sepenuhnya diabaikan oleh browser.

Contoh :

<!DOCTYPE html>
<html>

   <head>  <!-- Awal Document Header -->
      <title>Ini adalah judul dari dokumen </title>
   </head> <!-- Akhir Document Header -->

   <body>
      <p>Isi dokumen ditulis di sini.....</p>
   </body>

</html>

Kode ini akan menghasilkan tampilan seperti ini dibrowser, dan tidak menampilkan komentar yang kita buat :

Komentar Valid vs Invalid

Komentar tidak bersarang, artinya komentar tidak dapat dimasukkan ke dalam komentar lain.

Kedua, urutan tanda hubung ganda “–” mungkin tidak muncul di dalam komentar, kecuali kode bagian penutup –> tag.

Anda juga harus memastikan bahwa tidak ada spasi di awal string komentar.

Pada contoh penulisan komentar berikut, kita akan menulis kode komentar yang valid yang diabaikan oleh browser.

<!DOCTYPE html>
<html>

   <head>
      <title>Contoh Kode Komentar Valid</title>
   </head>

   <body>
      <!--   Ini adalah contoh penulisan yang valid -->
      <p>Isi dokumen ditulis di sini.....</p>
   </body>

</html>

Di browser, kode ini akan menampilkan hasil sebagai berikut :

Selanjutnya, kita akan coba menulis kode komentar yang tidak valid dan coba tampilkan di browser. Komentar ini akan dibaca dan ditampilkan dibrowser karena ada spasi antara kurung siku kiri dan tanda seru.

<!DOCTYPE html>
<html>

   <head>  
      <title>Contoh Kode Komentar yang Tidak Valid </title>
   </head>

   <body>
      < !--   Komentar ini tidak valid, karena ada spasi di awal sebelum tanda seru -->
      <p>Isi dokumen ditulis di sini.....</p>
   </body>	

</html>

Di browser, kode ini akan menampilkan hasil sebagai berikut :

Komentar Multiline

Sejauh ini kita telah melihat single komentar, tetapi HTML mendukung komentar multi-line juga.

Anda dapat mengomentari beberapa baris dengan tag awal <! — dan tag penutup –> ditempatkan sebelum baris pertama dan akhir baris terakhir seperti yang ditunjukkan pada contoh berikut.

Contoh :

<!DOCTYPE html>
<html>

   <head>  
      <title>Komentar Multiline</title>
   </head> 

   <body>
      <!-- 
         Ini adalah contoh komentar multiline dan dapat dituliskan
         di sebanyak baris yang Anda inginkan.
      -->
      <p>Isi dokumen ditulis di sini.....</p>
   </body>

</html>

Di browser, kode ini akan menampilkan hasil sebagai berikut :

Komentar Bersyarat

Komentar bersyarat hanya berfungsi di Internet Explorer (IE) pada Windows tetapi diabaikan oleh browser lain.

Kode ini didukung dari Explorer 5 dan seterusnya, dan Anda dapat menggunakannya untuk memberikan instruksi bersyarat ke berbagai versi IE.

Contoh :

<!DOCTYPE html>
<html>

   <head>  
      <title>Komentar Conditional</title>
      <!--[if IE 6]>
         Instruksi special untuk IE 6 di sini
      <![endif]-->
   </head> 

   <body>
      <p>Isi dokumen ditulis di sini.....</p>
   </body>
	
</html>

Menggunakan Tag <coment>

Ada beberapa browser yang mendukung tag <comment> untuk mengomentari bagian dari kode HTML.

Catatan – Tag <comment> sudah tidak digunakan lagi di HTML5 (deprecated). Jangan gunakan elemen ini.

Contoh :

<!DOCTYPE html>
<html>

   <head>
      <title>Menggunakan Tag Comment</title>
   </head>

   <body>
      <p>Ini <comment>bukan</comment> Internet Explorer.</p>
   </body>

</html>

Komentar dalam Kode Script

JavaScript & HTML adalah 2 bahasa yang berbeda, jika Anda menggunakan Java Script atau VB Script dalam kode HTML, disarankan untuk meletakkan kode script itu di dalam komentar HTML agar lama browser dapat bekerja dengan baik.

Contoh :

<!DOCTYPE html>
<html>

   <head>
      <title>Komentar Kode Script</title>
      <script>
         <!-- 
            document.write("Halo Dunia!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Halo, Dunia!</p>
   </body>

</html>

Di browser, kode ini akan menampilkan hasil sebagai berikut :

Komentar Dalam Sylesheet

CSS dan HTML juga 2 bahasa yang berbeda, sekedar tambahan, jika Anda menggunakan Cascading Style Sheet (CSS) dalam kode HTML, disarankan untuk meletakkan kode style sheet itu di dalam komentar HTML. agar browser lama dapat bekerja dengan baik.

Contoh :

<!DOCTYPE html>
<html>

   <head>
      <title>Komentar Style Sheets</title>
      <style>
         <!--
            .contoh{
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>

   <body>
      <div class = "contoh">Halo Dunia!</div>
   </body>

</html>

Di browser, kode ini akan menampilkan hasil sebagai berikut :

Untuk materi selanjutnya, kita akan membahas Tutorial Belajar HTML 5 Bagian 10 : Fungsi Tag Image di HTML.

Apa itu komentar pada HTML?

Apa itu Komentar dalam HTML? Komentar adalah elemen yang akan diabaikan oleh browser. Ia tidak akan ditampilkan di dalam web. Komentar biasanya digunakan untuk memberikan informasi tambahan pada kode HTML dan kadang juga digunakan untuk menon-aktifkan beberapa kode HTML.

Bagaimana cara menuliskan komentar pada file HTML dan CSS?

Komentar CSS diawali dengan garis miring tanda bintang ( /* ) dan diakhiri dengan tanda bintang garis miring terbalik ( */ ). Teks apa pun yang berada diantara tanda pembuka dan penutup tidak akan dianggap sebagai kode CSS atau dianggap tidak ada oleh browser, termasuk tanda pembuka dan penutup komentar sendiri.