Cara Membuat Komentar pada HTML
Komentar yang kita bahas pada materi tutorial belajar HTML dasar ini adalah komentar untuk kode HTML bukan komentar untuk halaman web. Maksudnya, ini bukanlah kotak komentar yang digunakan untuk mengirimkan komentar pada website tetapi komentar yang kita maksud adalah tag HTML yang berguna agar teks pada kode HTML tidak ditampilkan pada halaman web. Tidak hanya tidak ditampilkan pada halaman web, komentar juga tidak diproses oleh web browser.
Komentar dapat kita gunakan untuk berbagai tujuan, diantaranya adalah:
- Sebagai pengingat tentang kode HTML yang kita buat jika suatu hari nanti kita lupa kegunaan dari kode yang kita tulis.
- Sebagai penanda awal dan akhir dari bagian kode tertentu. Ini sangat penting jika kita memiliki kode dengan jumlah baris yang sangat banyak atau jumlah file yang sangat banyak.
- Untuk mencoba-coba beberapa kode HTML tanpa menghapus kode yang lama.
- Sebagai conditional comment pada Internet Explorer di Windows.
Cara Membuat Komentar di HTML
Untuk membuat komentar di HTML dapat menggunakan tag <!-- isi_komentar -->. Isi komentar dapat berupa teks biasa atau tag-tag HTML yang tidak ingin diproses oleh web browser. Untuk lebih jelasnya berikut contoh kode HTML komentar:
<html>
<head><title>Belajar Komentar</title></head>
<body>
Ini ditampilkan oleh web browser.
<!-- Ini tidak ditampilkan oleh web browser. -->
<h1>Heading ini juga ditampilkan web browser</h1>
<!-- <h1>Heading ini tidak ditampilkan oleh web browser</h1> -->
</body>
</html>
Hasil tampilan di browser:
Penjelasan: Baris ke-7 adalah teks biasa yang tidak ditampilkan pada halaman web karena berada di dalam tag komentar. Beris ke-11 juga tidak ditampilkan pada halaman web. Jadi tidak hanya teks biasa yang tidak diproses oleh web browser. Semua tag, elemen dan atribut jika berada di dalam tag komentar maka tidak akan diproses oleh web browser.
Tips: Jika menggunakan atom, cara membuat komentar pada HTML sangat cepat dan mudah. Caranya adalah blok (sorot) teks yang ingin dijadikan komentar lalu tekan CTRL + / maka secara otomatis tag komentar akan ditambahkan diantara teks yang anda blok tadi. Simak juga tag html untuk menebalkan teks.
Contoh Penggunaan Komentar
<!DOCTYPE html>
<html>
<head>
<title>Belajar Komentar HTML</title>
<style>
table, th, td { border: 1px solid; }
</style>
</head>
<body>
<p>Daftar Mahasiswa</p>
<table>
<!-- start header tabel mahasiswa -->
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<!-- end header tabel mahasiswa -->
<tr>
<td>1</td>
<td>Aris arisris</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>2</td>
<td>Fulan Fulanlan</td>
<td>Teknik Industri</td>
</tr>
<tr>
<td>3</td>
<td>Wawan Wawanwan</td>
<td>Teknik Komputer</td>
</tr>
<tr>
<td>Jumlah Mahasiswa</td>
<!-- menggabungkan kolom nama dan jurusan untuk jumlah mahasiswa -->
<td colspan="2">3</td>
</tr>
</table>
</body>
</html>
Penjelasan: Pada contoh kode HTML sederhana di atas, baris ke-12 saya gunakan untuk menandai tabel di HTML bahwa di posisi itu adalah awal dari header tabel mahasiswa. Pada baris ke-18 saya gunakan untuk menandai bahwa di posisi itu adalah akhir dari header tabel mahasiswa. Memang tidak akan ada perubahan pada tampilan tapi ini sangat berguna untuk pengingat jika kita memiliki baris kode yang sangat banyak dan membingungkan. Begitu juga pada baris ke-36, saya gunakan untuk memberi keterangan bahwa kode tersebut menggabungkan kolom.
Komentar Lebih dari 1 Baris
Kita dapat membuat komentar untuk teks lebih dari 1 baris. Hal ini dilakukan biasanya untuk menonaktifkan kode agar kode HTML tidak diproses web browser. Ini berguna saat kita mencoba-coba kode HTML. Jadi kita tidak perlu menghapus kode melainkan hanya meng-comment kode tersebut. Misalnya:
<html>
<head><title>Belajar Komentar</title></head>
<body>
<h1>Daftar Jurusan</h1>
<!-- <ul>
<li>Teknik informatika</li>
<li>Teknik komputer</li>
<li>Teknik telekomunikasi</li>
</ul> -->
<ol>
<li>Teknik informatika</li>
<li>Teknik komputer</li>
<li>Teknik telekomunikasi</li>
</ol>
</body>
</html>
Penjelasan: Pada percobaan di atas, kita meng-comment baris ke-6 sampai baris ke-10. Mungkin kita ingin mencoba-coba kode HTML lebih baik menggunakan <ul> atau <ol>. Jadi kita bisa mencobanya tanpa menghapus kode yang kita buat.
Contoh di atas sangat sederhana, anda akan memahami manfaat dari comment jika sudah membuat kode yang lebih kompleks. Lihat juga struktur dasar html.
Komentar Bersyarat
Komentar bersyarat atau conditional comment hanya berlaku untuk web browser Internet Explorer di Windows. Kegunaannya biasanya untuk menjalankan script yang khusus ditujukan pada pengguna Internet Explorer. Jadi web browser lain tidak akan menjalankannya.
<html>
<head>
<title>Belajar Komentar</title>
<!--[if IE 6]>
Instruksi khusus untuk Internet Explorer 6 disini
<![endif]-->
</head>
<body>
<p>Belajar komentar HTML.</p>
</body>
</html>
Penjelasan: Pada baris ke-4 hingga ke-6 hanya akan diproses jika kita membukanya pada web browser Internet Explorer versi 6 karena kodenya ( if IE 6 ). Jika kita membukanya pada web browser lain misalnya Google Chrome maka baris ke-4 hingga ke-6 tidak akan diproses.
Sekali lagi, komentar bersyarat hanya berlaku untuk Internet Explorer [if IE 6], [if IE 7], [if IE 8] dan seterusnya. Kita tidak bisa menggunakannya untuk web browser lain misalnya <!--[if Chrome 78]> ini tetap tidak akan berlaku untuk Google Chrome meskipun kita menulis Chrome versi 78 seperti contoh tersebut. Pelajari juga tentang cara membuat list di html.
Materi komentar HTML sangat simpel. Namun jika ada hal yang tidak bisa dipahami silahkan kirimkan pertanyaan melalui kolom komentar.
