Bagaimana cara penulisan komentar pada 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.

Table of Contents Show

Komentar Valid vs Invalid
Komentar Multiline
Komentar Bersyarat
Menggunakan Tag <coment>
Komentar dalam Kode Script
Komentar Dalam Sylesheet
Bagaimana penulisan komentar di HTML?
Bagaimana cara menuliskan komentar pada file HTML dan CSS?
Apa itu head pada HTML?
Tag apa yang digunakan untuk membuat baris baru dalam HTML?

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.

Bagaimana penulisan komentar di HTML?

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.

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.

Apa itu head pada HTML?

Tag <HEAD> tugasnya adalah memberikan informasi tentang dokumen, maksudnya didalam tag <head> kita bisa menambahkan tag- tag yang biasanya digunakan untuk memberikan informasi berupa penulis, judul dokumen, kata kunci pada dokumen dan masih banyak lagi informasi yang bisa di tambahkan pada tag ini.