Pada dasarnya, HTML digunakan untuk menyusun konten, sedangkan CSS dan JavaScript digunakan untuk “mempercantik” dan membuat konten tersebut interaktif. Agar CSS dan JavaScript bisa “menunjuk” atau memilih elemen HTML tertentu, kita memerlukan pengenal unik. Di sinilah peran atribut class dan id menjadi sangat penting.
Apa Itu Atribut Class?
Atribut class (kelas) digunakan untuk mengelompokkan elemen HTML yang memiliki karakteristik atau gaya yang sama. Dengan class, Anda bisa menerapkan satu gaya CSS ke banyak elemen sekaligus.
- Sifat: Dapat digunakan pada banyak elemen HTML.
- Tujuan: Mengelompokkan elemen untuk tujuan styling (CSS) atau manipulasi (JavaScript).
- Cara Penggunaan: Anda memberikan nama
classpada elemen. Di CSS, Anda memilihnya dengan simbol titik (.) diikuti namaclasstersebut.
Berikut adalah contoh penggunaan class:
<style>
.teks-merah {
color: red;
}
.teks-besar {
font-size: 20px;
}
</style>
<body>
<h1 class="teks-merah">Judul Berwarna Merah</h1>
<p class="teks-merah teks-besar">Paragraf ini berwarna merah dan besar.</p>
<div class="teks-merah">
<p>Ini juga akan menjadi merah.</p>
</div>
</body>
Dalam contoh di atas, semua elemen yang memiliki class="teks-merah" akan berubah menjadi merah, sedangkan paragraf juga akan memiliki ukuran font yang lebih besar karena memiliki dua class.
Apa Itu Atribut Id?
Atribut id (identitas) digunakan untuk memberikan pengenal unik pada satu elemen HTML. Sebuah id harus unik dalam seluruh dokumen HTML. Anda tidak boleh memiliki dua elemen dengan id yang sama.
- Sifat: Harus unik dan hanya boleh digunakan satu kali per halaman.
- Tujuan: Menentukan elemen tunggal yang sangat spesifik untuk tujuan styling yang unik atau untuk manipulasi JavaScript.
- Cara Penggunaan: Anda memberikan nama
idpada elemen. Di CSS, Anda memilihnya dengan simbol pagar (#) diikuti namaidtersebut.
Berikut adalah contoh penggunaan id:
<style>
#navigasi-utama {
background-color: #333;
color: white;
}
</style>
<body>
<div id="navigasi-utama">
<a href="#">Beranda</a> | <a href="#">Tentang</a>
</div>
</body>
Dalam contoh ini, id="navigasi-utama" memastikan bahwa gaya CSS tersebut hanya akan diterapkan pada satu div navigasi, dan tidak akan mempengaruhi elemen lain.
Perbedaan Utama: Class vs. Id
Kapan Menggunakan Class dan Kapan Menggunakan Id?
- Gunakan
classketika Anda ingin menerapkan gaya yang sama pada beberapa elemen, seperti:- Memberi warna pada semua tombol.
- Mengatur ukuran font untuk beberapa judul.
- Membuat tata letak yang sama untuk beberapa kotak konten.
- Gunakan
idketika Anda perlu menargetkan elemen yang benar-benar unik, seperti:- Blok navigasi utama (
<div id="navigasi">). - Bagian footer situs web (
<div id="footer">). - Satu-satunya tombol yang memicu fungsi JavaScript tertentu.
- Blok navigasi utama (
Dengan memahami dan menggunakan atribut class dan id secara efektif, Anda akan memiliki fondasi yang kuat untuk mengontrol tampilan dan perilaku halaman web Anda, menjadikannya responsif dan dinamis.
