Mengenal Class dan Id Pada HTML adalah langkah penting bagi kalian yang ingin menata tampilan serta struktur halaman web dengan rapi, konsisten, dan mudah dipelihara.
Halo teman-teman! Pada artikel ini kodelyly.com akan membahas peran class dan id, kapan memakai yang mana, serta contoh penggunaannya di CSS dan JavaScript agar proyek kalian lebih terorganisir dan ramah SEO.
Mengenal Class Dan Id Pada HTML
Class adalah atribut untuk memberi “label” yang bisa dipakai berulang pada banyak elemen. Ia ideal untuk styling global atau kelompok komponen: kartu, tombol, grid, dan sebagainya. Sementara itu, id adalah penanda unik untuk satu elemen tertentu pada halaman. Id cocok untuk target yang spesifik seperti anchor tautan, titik fokus JavaScript, atau landmark aksesibilitas.
Dengan memahami bedanya, kalian bisa menghindari konflik gaya (style conflict), meningkatkan keterbacaan kode, dan menjaga konsistensi antarkomponen.
Perbedaan Class Vs Id
| Aspek | class | id |
|---|---|---|
| Tujuan | Kelompok elemen (berulang) | Satu elemen spesifik (unik) |
| Jumlah | Bisa dipakai di banyak elemen | Hanya satu per halaman |
| Selektor CSS | .nama-class | #nama-id |
| Spesifisitas | Lebih rendah (mudah ditimpa) | Lebih tinggi (lebih kuat) |
| Kegunaan umum | Tema komponen, layout grid, utility | Anchor, hook JavaScript, landmark |
Tip singkat: jika kalian ragu, mulai dulu dengan class. Gunakan id hanya ketika memang butuh penanda unik.
Cara Menggunakan Di Kode
<!-- HTML -->
<div class="card highlight" id="produk-utama">
<h2 class="title">Kodelyly Headphone</h2>
<p class="desc">Audio jernih dengan aksen ungu.</p>
</div>
<!-- CSS -->
.card { padding:16px; border-radius:12px; }
.highlight { box-shadow:0 8px 24px rgba(0,0,0,.15); }
#produk-utama { outline:2px solid rebeccapurple; }
<!-- JavaScript (opsional) -->
<script>
document.getElementById('produk-utama').scrollIntoView({behavior:'smooth'});
</script>
Penjelasan singkat: class card dan highlight dipakai berulang untuk gaya yang konsisten, sedangkan id produk-utama dipakai sekali untuk penandaan unik (misalnya target scroll atau pengukuran analitik).
Kesimpulan
Mengenal class dan id pada HTML membantu kalian memilih penanda yang tepat: class untuk gaya berulang dan pengelompokan komponen, id untuk target unik seperti anchor atau hook JavaScript. Dengan pemakaian yang disiplin, struktur menjadi jelas, CSS lebih mudah dikelola, dan pengalaman pengguna—termasuk aksesibilitas serta SEO—menjadi lebih baik.
Sekian artikel dari kodelyly.com. Semoga bermanfaat dan sampai jumpa di pembahasan berikutnya!