Perbedaan ID dan Class pada HTML dan Cara Mengujinya – Saat sedang belajar membuat website, tentunya akan ada beberapa hal yang tidak mudah untuk dipelajari maupun dipahami. Seperti misalnya saat kita sedang mempelajari HTML dan CSS untuk pertama kali dalam kondisi awam. Terkadang masih ada salah dalam penyebutan ID dan class. Meskipun berbeda, namun sayangnya dalam penggunaannya di HTML dan CSS tidak akan begitu terlihat perbedaannya.
Perbedaan ID dan Class
Memang apa sih perbedaan ID dan Class? Nah, ini dia perbedaan ID dan Class pada HTML!
Sifat ID dan Class
ID: unik, tidak bisa digunakan berulang-ulang
Dalam penggunaannya, ID bersifat unik. Dimana ID hanya bisa digunakan 1x saja dan tidak bisa digunakan berulang-ulang. Bisa dibilang, ID digunakan sebagai penanda untuk membedakan bagian 1 dan bagian lainnya.
Class: bisa digunakan berulang-ulang
Berbeda dengan ID, class tidak bersifat unik dan bisa digunakan berulang-ulang. Jadi, kita bisa memanggil sebuah class berkali-kali dalam beberapa elemen di file HTML jika memiliki style yang sama.
Penulisan ID dan Class
ID: #
Untuk menandakan kalau sebuah elemen adalah ID, bisa menggunakan tanda pagar (#).
Class: .
Untuk menandakan kalau sebuah elemen adalah Class, bisa menggunakan tanda titik (.).
Cara Menguji Perbedaan ID dan Class
Dalam HTML, mungkin tidak akan terlihat perbedaannya karena jika memaksa menggunakan banyak ID, perubahan dan style bisa ikut berubah juga. Tapi, akan terlihat sangat berbeda dan merugikan jika menggunakan jQuery karena bisa membuat fungsi dari jQuery menjadi tidak berjalan sebagaimana mestinya.
Untuk menguji perbedaan ID dan Class dalam HTML, kita bisa menggunakan salah satu fungsi jQuery yaitu klik. Untuk mencobanya, kita bisa memulai menulis kode seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Uji ID & Class</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
background-color: orange;
}
</style>
</head>
<body>
<h1>Cara Menguji Perbedaan ID dan Class pada HTML</h1>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#box').click(function(){
$(this).css({'background-color':'red'})
})
</script>
</body>
</html>
Dapat dilihat pada kode di atas, untuk menguji ID, kita bisa membuat 6 buah div dengan id bernama box. Namun, saat dijalankan menggunakan jQuery, hanya 1 box pertama saja yang akan berubah menjadi warna merah pada saat diklik.
Untuk menguji class, ubah semua id menjadi class. Dan jangan lupa mengubah tandanya juga dari # menjadi menggunakan titik (.).
Jalankan kembali kode tersebut dengan membuka file HTML-nya dan coba klik masing-masing box. Sekarang semua box akan berubah menjadi berwarna merah.
Nah, bagaimana? Sekarang sudah paham bukan dengan perbedaan ID dan Class? Jadi, selalu perhatikan penulisan tanda ID dan class ya! Jangan sampai salah dan membuat elemen di HTML jadi tidak berjalan saat menggunakan jQuery ya!
Semoga bermanfaat 🙂