Dalam pengembangan web, dua istilah yang sering muncul ketika bekerja dengan HTML dan CSS adalah ID dan Kelas (Class). Meskipun keduanya berfungsi untuk mengidentifikasi dan memberi gaya atau style pada elemen-elemen di dalam halaman web, namun sebenarnya memiliki perbedaan mendasar yang sangat penting untuk dipahami. Pertanyaan Apakah Perbedaan Antara ID dan Class Pada HTML/CSS? ini juga sering muncul.
Baik kita akan mulai dengan penjelasan satu demi satu tentang ID dan Class pada HTML/CSS.
ID pada HTML dan CSS
ID adalah atribut HTML yang digunakan untuk memberikan identifikasi unik pada sebuah elemen. Setiap ID harus unik dalam satu halaman HTML, artinya tidak boleh ada dua atau lebih elemen dengan ID yang sama. ID biasanya digunakan ketika kita ingin mengatur atau menargetkan satu elemen spesifik di halaman.
Penggunaan ID di HTML
1 | <div id="main-header">Ini adalah Bagian Header Utama</div> |
Jika kita lihat dari contoh HTML di atas, elemen <div> diberi ID "main-header" . Dalam satu halaman web, hanya satu elemen yang boleh menggunakan ID “main-header”.
Penggunaan ID di CSS
Contoh penggunaan ID di CSS dapat dilihat pada contoh berikut ini:
1 2 3 4 | #main-header { background-color: #f1f1f1; font-size: 24px; } |
ID di CSS ditulis dengan simbol # diikuti nama ID , seperti #main-header untuk memberi tahu browser agar menerapkan gaya yang ditentukan hanya pada elemen HTML dengan ID tersebut.
Class Pada HTML dan CSS
Class digunakan untuk mengelompokkan beberapa elemen yang ingin diberi gaya yang sama. Tidak seperti ID, sebuah kelas dapat digunakan pada lebih dari satu elemen dalam halaman yang sama, memungkinkan kita untuk menerapkan gaya yang seragam pada banyak elemen.
Penggunaan Class di HTML
1 2 | <p class="highlight">Ini adalah teks yang disorot</p> <p class="highlight">Teks ini juga disorot dengan gaya yang sama</p> |
Kedua paragraf di atas memiliki kelas “highlight“, yang berarti mereka akan memiliki gaya yang sama.
Penggunaan Class di CSS
1 2 3 4 | .highlight { color: red; font-weight: bold; } |
Class di CSS ditulis dengan simbol . diikuti nama kelas , seperti .highlight . Semua elemen HTML yang memiliki kelas “highlight” akan mendapatkan gaya yang sama yang telah ditentukan.
Singkatnya ID adalah pengenal unik untuk satu elemen HTML sedangkan Class adalah pengenal yang dapat digunakan kembali dan dapat diterapkan ke beberapa elemen.
Kapan Harus Menggunakan ID dan Class?
- ID digunakan ketika kita ingin menargetkan dan mengatur satu elemen tertentu saja. Contohnya, jika kita memiliki satu tombol di halaman yang berfungsi sebagai tombol submit, kita bisa menggunakan ID.
- Class (Kelas) digunakan ketika kita ingin memberi gaya yang sama pada beberapa elemen. Misalnya, jika kita ingin menyorot beberapa paragraf atau bagian teks dengan gaya yang seragam, kita bisa menggunakan kelas.
Mengkombinasikan ID dan Class
Terkadang, kita bisa menggunakan kombinasi ID dan class pada elemen yang sama untuk memberi gaya lebih spesifik. Misalnya:
1 | <p id="intro" class="highlight">Ini adalah teks pengantar yang penting.</p> |
Di sini, elemen <p> memiliki ID "intro" dan juga Class "highlight" . Kita bisa menargetkan elemen ini secara khusus dengan ID, tetapi juga menerapkan gaya yang sama seperti elemen lain dengan kelas “highlight“.
Kesimpulan Dari Perbedaan Antara ID dan Class Pada HTML/CSS
Sederhananya, ID dan Class adalah alat penting dalam HTML dan CSS untuk mengidentifikasi dan memberi gaya pada elemen. ID adalah unik dan digunakan untuk satu elemen, sementara Class dapat digunakan untuk mengelompokkan beberapa elemen dengan gaya yang sama. Memahami dengan baik perbedaan ID dan Class dan mengetahui kapan dan bagaimana menggunakan keduanya akan membantu dalam membangun halaman web yang lebih terstruktur.
Untuk lebih memahami tentang HTML dan CSS kami menyarankan untuk mempelajari topik lainnya tentang HTML di Index Tutorial HTML dan topik tentang CSS di Index Tutorial CSS.
