HTML - Komentar

Komentar adalah sepotong kode yang diabaikan oleh browser web mana pun. Menambahkan komentar ke dalam kode HTML Anda merupakan praktik yang baik, terutama dalam dokumen yang kompleks, untuk menunjukkan bagian dari dokumen, dan catatan lain apa pun kepada siapa pun yang melihat kode tersebut. Komentar membantu Anda dan orang lain memahami kode Anda dan meningkatkan keterbacaan kode.

Komentar HTML ditempatkan di antaranya tag. Jadi, konten apa pun yang ditempatkan dengan tag-in <! - ... -> akan diperlakukan sebagai komentar dan akan sepenuhnya diabaikan oleh browser.

Contoh

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil berikut tanpa menampilkan konten yang diberikan sebagai bagian dari komentar -

Komentar Valid vs Invalid

Komentar tidak bersarang yang berarti komentar tidak dapat dimasukkan ke dalam komentar lain. Kedua, urutan tanda hubung ganda "-" mungkin tidak muncul di dalam komentar kecuali sebagai bagian dari penutup -> tag. Anda juga harus memastikan bahwa tidak ada spasi di awal string komentar.

Contoh

Di sini, komentar yang diberikan adalah komentar yang valid dan akan dihapus oleh browser.

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Namun, baris berikut bukanlah komentar yang valid dan akan ditampilkan oleh browser. Ini karena ada spasi antara kurung siku kiri dan tanda seru.

<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Komentar Multiline

Sejauh ini kami telah melihat komentar baris tunggal, tetapi HTML mendukung komentar multi-baris juga.

Anda dapat mengomentari beberapa baris dengan tag awal khusus <! - dan tag penutup -> ditempatkan sebelum baris pertama dan akhir baris terakhir seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

Contoh

<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Komentar Bersyarat

Komentar bersyarat hanya berfungsi di Internet Explorer (IE) pada Windows tetapi diabaikan oleh browser lain. Mereka didukung dari Explorer 5 dan seterusnya, dan Anda dapat menggunakannya untuk memberikan instruksi bersyarat ke berbagai versi IE.

Contoh

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Anda akan menemukan situasi di mana Anda perlu menerapkan lembar gaya yang berbeda berdasarkan versi Internet Explorer yang berbeda, dalam situasi seperti itu, komentar bersyarat akan membantu.

Menggunakan Tag Komentar

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

Note- Tag <comment> tidak digunakan lagi di HTML5. Jangan gunakan elemen ini.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

Jika Anda menggunakan IE, maka akan menghasilkan hasil sebagai berikut -

Tetapi jika Anda tidak menggunakan IE, maka itu akan menghasilkan hasil sebagai berikut -

Kode Skrip Komentar

Meskipun Anda akan mempelajari JavaScript dengan HTML, dalam tutorial terpisah, tetapi di sini Anda harus membuat catatan bahwa jika Anda menggunakan Java Script atau VB Script dalam kode HTML Anda, maka disarankan untuk meletakkan kode skrip itu di dalam komentar HTML yang tepat agar lama browser dapat bekerja dengan baik.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Lembar Gaya Berkomentar

Meskipun Anda akan belajar menggunakan style sheets dengan HTML dalam tutorial terpisah, tetapi di sini Anda harus membuat catatan bahwa jika Anda menggunakan Cascading Style Sheet (CSS) dalam kode HTML Anda, maka disarankan untuk meletakkan kode style sheet itu di dalam komentar HTML yang tepat. agar browser lama dapat bekerja dengan baik.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -