Apa itu komentar dalam html?

Question

Pada artikel ini kamu akan mempelajari bagaimana cara menambahkan komentar baris-tunggal dan komentar multi-baris ke dalam dokumen HTML.

Table of Contents Show

Tag Komentar HTML
Kapan Sebaiknya Menggunakan Komentar HTML
Cara Komentar Baris-Tunggal di HTML
Cara Menulis Komentar Inline di HTML
Cara Menulis Komentar Multi-Baris di HTML
Cara Mengomentari Tag di HTML
Shortcut Keyboard untuk Menambahkan Komentar HTML
Bagaimana cara menuliskan komentar di HTML?
Bagaimana cara menuliskan komentar pada file HTML dan CSS?
Apa itu head pada HTML?
Elemen apa saja yang terdapat pada HTML dan jelaskan?

Kamu juga akan melihat mengapa menambahkan komentar dianggap sebagai praktik penulisan yang baik saat menulis kode HTML.

Mari kita mulai!

Tag Komentar HTML

Sintaks umum komentar HTML adalah seperti beriku:

<!-- Aku adalah komentar! -->

Komentar di HTML diawali dengan .

Jangan lupa menambahkan tanda seru di awal tag! Tapi kamu tidak perlu menambahkannya di akhir tag.

Tag komentar mengelilingi teks atau tag HTML yang ingin dikomentari.

Kapan Sebaiknya Menggunakan Komentar HTML

Komentar HTLM tidak ditampilkan di browser. Ini berarti setiap komentar yang kamu tambahkan ke kode sumber HTML tidak akan ditampilkan saat dokumen dirender di browser.

Karena itu, perlu diingat bahwa setiap orang dapat melihat kode sumber dari hampir semua situs web yang dipublikasikan di internet dengan membuka View -> Developer -> View Source – termasuk komentar di dalamnya.

Jadi komentarmu akan terlihat oleh orang lain jika kamu membuat dokumen HTML bersifat public.

Menulis komentar sangat membantu dan merupakan praktik yang baik untuk diterapkan saat menulis kode sumber. Komentar membantumu mendokumentasikan dan mengkomunikasikan kode yang kamu tulis serta proses berpikir kepada dirimu sendiri (dan orang lain). Komentar juga dapat mengingatkanmu mengenai apa yang kamu pikirkan/lakukan saat kamu kembali ke sebuah proyek setelah berbulan-bulan tidak mengerjakannya.

Komentar juga membantumu berkomunikasi dengan pengembang lain yang bekerja pada suatu proyek denganmu. Komentarmu dapat menjelaskan kepada mereka kenapa kamu menambahkan baris kode tertentu.

Cara Komentar Baris-Tunggal di HTML

Komentar baris-tunggal hanya mencakup satu baris saja. Seperti disinggung sebelumnya, baris tersebut tidak akan ditampilkan pada browser.

Gunakan komentar baris-tunggal saat kamu ingin menjelaskan dan memperjelas tujuan dari kode yang mengikutinya atau saat kamu ingin menambahkan pengingat untuk dirimu sendiri seperti berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Tambahkan navbar di sini-->
    <h2>Tentangku</h2>
    <p>Aku belajar kode dengan freeCodeCamp.</p>
    <p>Aku akan melalui setiap sertifikasi mereka yang luar biasa dan sangat membantu.</p>
    <p>Aku sedang dalam proses untuk menjadi pengembang web fullstack.</p>
    <h3>Pengalaman Kerja</h3>
</body>
</html>

Komentar baris-tunggal juga sangat berguna saat kamu ingin memperjelas di mana suatu tag berakhir. Ini sangat berguna dalam dokumen HTML yang panjang dan rumit di mana banyak hal terjadi dan kamu mungkin bingung di mana letak tag penutup.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section class="kontak">
    </section> <!--tag penutup dari section kontak ada di sini-->
</body>
</html>

Cara Menulis Komentar Inline di HTML

Kamu juga bisa menambahkan beberapa komentar di tengah kalimat atau baris kode.

Hanya teks di dalam  yang akan dikomentari, dan teks lain di dalam tag tidak akan terpengaruh.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Aku  <!--akan menjadi--> seorang pengembang web</p>
</body>
</html>

Cara Menulis Komentar Multi-Baris di HTML

Komentar juga dapat mencakup beberapa baris dengan menggunakan sintaks yang sama dengan yang sudah dibahas sebelumnya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Aku adalah seorang pengembang web</p>
    <!--Ini akan menjadi portfolioku.
	Aku akan menampilkan proyek-proyek yang paling aku banggakan.
	Aku dapat terus menambahkan tentang apa saja yang ingin ditambahkan
	karena aku menulis menggunakan komentar multi-baris di sini.-->
</body>
</html>

Cara Mengomentari Tag di HTML

Jadi bagaimana jika kamu ingin mengomentari sebuah tag di HTML?

Bungkus tag yang kamu inginkan di dalam  seperti berikut:


!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Halaman portfolioku</h2>
    <h3>proyek sertifikasi freeCodeCamp</h3>
    <!-- <section class="hero">
    </section>  -->
    <h2>Tentangku</h2>
</body>
</html>

Mengomentari suatu tag membantumu saat proses mencari kesalahan (debugging).

Saat sesuatu tidak bekerja sebagaimana mestinya atau tidak sesuai keinginanmu, cobalah komentari tag satu per satu. Hal ini dapat digunakan untuk menguji baris-baris tersebut dan menemukan bagian mana yang menyebabkan masalah.

Shortcut Keyboard untuk Menambahkan Komentar HTML

Ada shortcut yang dapat kamu gunakan untuk mengambah komentar - dan mungkin kamu akan sering menggunakannya. Shortcut-nya adalah

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Tambahkan navbar di sini-->
    <h2>Tentangku</h2>
    <p>Aku belajar kode dengan freeCodeCamp.</p>
    <p>Aku akan melalui setiap sertifikasi mereka yang luar biasa dan sangat membantu.</p>
    <p>Aku sedang dalam proses untuk menjadi pengembang web fullstack.</p>
    <h3>Pengalaman Kerja</h3>
</body>
</html>

1 untuk pengguna Mac atau

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Tambahkan navbar di sini-->
    <h2>Tentangku</h2>
    <p>Aku belajar kode dengan freeCodeCamp.</p>
    <p>Aku akan melalui setiap sertifikasi mereka yang luar biasa dan sangat membantu.</p>
    <p>Aku sedang dalam proses untuk menjadi pengembang web fullstack.</p>
    <h3>Pengalaman Kerja</h3>
</body>
</html>

2 untuk pengguna Windows dan Linux.

Untuk menambahkan komentar baris-tunggal, tekan kombinasi tombol di atas dalam kode editor pada baris yang ingin dikomentari. Kemudian seluruh baris akan dikomentari. Perlu diingat bahwa karena semuanya akan dikomentari pada baris tersebut, metode ini hanya berfungsi untuk komentarbaris-tunggal. Anda harus menambahkan komentar inline secara manual.

Untuk menambahkan komentar multi-baris, pilih dan sorot semua teks atau tag yang ingin dikomentari dan tekan kombinasi tombol yang ditunjukkan sebelumnya. Setiap baris yang kamu pilih sekarang akan memiliki komentar.

Kesimpulan

Dan begitulah - sekarang kamu tahu bagaimana dan mengapa menggunakan komentar di HTML!

Pelajari lebih lanjut mengenai HTML dengan menonton video-video di channel Youtube freeCodeCamp:

HTML Tutorial - Website Crash Course for Beginners
HTML Full Course - Build a Website Tutorial

freeCodeCamp juga menyediakan setifikasi gratis berbasis proyek pada Responsive Web Design.

Ini sangat ideal untuk pemula dan tidak memerlukan pengetahuan sebelumnya. Kamu akan memulai dari hal yang benar-benar dasar dan tingkatkan kemampuanmu seiring waktu. Di akhir kamu akan menyelesaikan lima buah proyek.

Terima kasih sudah membaca dan selamat belajar :)

Author: Dionysia Lemonaki (English)

Learning something new everyday and writing about it

Translator: Imam Sobirin

Hi :)

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Bagaimana cara menuliskan komentar di HTML?

Komentar dapat kita buat dengan tag  . Komentar tidak akan ditampilkan oleh browser, tapi kita bisa melihatnya dengan cara view source.

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.

Elemen apa saja yang terdapat pada HTML dan jelaskan?

Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree. Pada diagram tersebut, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan Node teks.

kode html