Mengenal Class dan Id pada HTML

HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat struktur halaman web. Dalam HTML, ada berbagai cara untuk mengelompokkan dan memberi identitas pada elemen-elemen di halaman. Dua atribut yang sangat penting untuk tujuan ini adalah class dan id. Meskipun keduanya berfungsi untuk menandai elemen HTML, mereka memiliki perbedaan yang signifikan dalam penggunaannya. Pada artikel ini, kita akan membahas perbedaan antara class dan id, serta bagaimana cara penggunaannya dalam pengembangan web.

Apa Itu class dan id?

1. Atribut class
   Atribut class digunakan untuk memberikan kelompok atau kategori pada elemen-elemen yang memiliki fungsi atau tampilan serupa. Dengan menggunakan class, kita dapat mengelompokkan beberapa elemen HTML untuk diterapkan aturan CSS yang sama. Misalnya, kita bisa memberikan class yang sama pada beberapa paragraf, gambar, atau tombol yang ingin kita beri gaya serupa. Atribut ini bersifat reusable, artinya satu class bisa diterapkan pada lebih dari satu elemen dalam satu halaman.

   Contoh penggunaan class:

   <p class="teks-besar">Ini adalah teks dengan ukuran besar.</p>
   <p class="teks-besar">Teks ini juga menggunakan ukuran besar.</p>
   

   Dalam contoh di atas, kedua elemen paragraf memiliki class="teks-besar", yang memungkinkan kita untuk memberikan gaya yang sama, seperti ukuran font, pada keduanya menggunakan CSS.

   CSS untuk class:

   .teks-besar {
       font-size: 20px;
   }
   

2. Atribut id
   Sementara itu, atribut id digunakan untuk memberi identitas unik pada satu elemen tertentu. Elemen yang diberi id hanya boleh memiliki satu elemen dengan id yang sama dalam satu halaman HTML. Atribut ini sangat berguna ketika kita ingin mengakses atau memanipulasi elemen secara spesifik, baik melalui CSS maupun JavaScript. Perbedaannya dengan class adalah id bersifat unik, artinya setiap id harus berbeda di seluruh halaman.

   Contoh penggunaan id:

   <div id="konten-utama">Ini adalah konten utama halaman.</div>
   

   Pada contoh di atas, elemen div diberikan atribut id="konten-utama", yang menandakan bahwa elemen ini adalah bagian yang spesifik di halaman, yang bisa diberi aturan gaya atau diakses dengan cara tertentu melalui JavaScript.

   CSS untuk id:

   #konten-utama {
       background-color: #f0f0f0;
   }
   

   Menggunakan JavaScript dengan id:

   document.getElementById("konten-utama").style.display = "none";
   

Perbedaan Antara class dan id

Meskipun keduanya digunakan untuk memberi identitas pada elemen HTML, ada beberapa perbedaan mendasar antara class dan id:

1. Keunikan:

   • class: Dapat diterapkan pada banyak elemen dalam satu halaman.
   • id: Hanya boleh diterapkan pada satu elemen saja di seluruh halaman.

2. Penggunaan di CSS:

   • class: Dipilih dengan menggunakan tanda titik (.), seperti .teks-besar.
   • id: Dipilih dengan menggunakan tanda pagar (#), seperti #konten-utama.

3. Manipulasi dengan JavaScript:

   • class: Bisa digunakan untuk memilih beberapa elemen sekaligus yang memiliki class yang sama menggunakan getElementsByClassName() atau querySelectorAll().
   • id: Hanya dapat memilih satu elemen berdasarkan id yang spesifik menggunakan getElementById().

Kapan Menggunakan class dan id?

• Gunakan class jika Anda ingin menerapkan gaya atau fungsionalitas yang sama pada banyak elemen dalam satu halaman.
• Gunakan id jika Anda membutuhkan identifikasi yang unik untuk satu elemen tertentu yang ingin Anda akses atau manipulasi secara spesifik.

Sebagai contoh, jika Anda ingin memberi gaya pada semua tombol di halaman Anda, Anda bisa menggunakan class. Namun, jika Anda hanya perlu menyembunyikan satu elemen tertentu dengan JavaScript, maka id adalah pilihan yang lebih tepat.

Baik class maupun id adalah atribut yang penting dalam HTML dan sering digunakan dalam pengembangan web untuk memberi identitas dan mengelompokkan elemen-elemen HTML. Memahami perbedaan keduanya serta kapan dan bagaimana menggunakannya sangat penting dalam menciptakan halaman web yang terstruktur dengan baik, mudah dikelola, dan responsif. Dengan menggunakan keduanya dengan tepat, Anda dapat membuat halaman web yang lebih terorganisir dan efisien, baik dari segi desain maupun fungsionalitas.