Tutorial Belajar HTML5 Bagian 9 : Cara Menambahkan Komentar di HTML

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.

Semoga artikel ini bisa menambah pengetahuan Anda tentang cara memberikan komentar dalam kode HTML.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0