Attribute Class Vs. Id pada HTML

Long time no post... It's been 5 years since I post my last article...

Oke, pada kesempatan kali ini saya akan membahas lebih lanjut artikel tentang HTML, pada artikel kali ini saya akan membahas perbedaan antara atribut Id dan Class pada HTML.

Sebelum lanjut keinti pembahasan mungkin alangkah baik nya kita refresh sekilas tentang pengertian HTML supaya dapat lebih mudah dipahami. 

Pengertian HTML (Singkat)

Pada dasarnya HTML adalah bahasa markup (markup language) yang digunakan untuk meng-define kerangka dari suatu website yang ditulis dalam bentuk

tag pembuka,mislakan: <p>

dan tag penutup, misalkan: </p> ,

atau ada beberapa tag html yang dapat berdiri sendiri tanpa tag penutup, mislakan: <img />

.

Dalam 1 rangkain tag tersebut disebut dengan Element , dan untuk menginisialisasikan sifat yang dimiliki pada suatu element dapat anda lakukan dengan cara mendefinisikan atribut (attibute) pada tag pembuka dari element tersebut, atau jika tag tersebut stand-alone maka atribut dapat disisipkan setelah nama tag dan dipisahkan dengan space.

Untuk lebih detailnya terkait dengan "Pengertian dan Dasar-Dasar HTML", anda dapat mengaksesnya melalui link berikut : Pengertian dan Dasar-Dasar HTML.

Selanjutnya mari kita lanjut ke pokok bahasan pada artikel kali ini yaitu mengenai atribut id dan class . 

Class VS. Id pada HTML / Markup Language

Atribut Class dan Id pada Html sebenarnya memiliki fungsional yang mayoritas sama.

Ya betul sama, sama-sama digunakan untuk memberikan indentitas pada suatu element dengan begitu JavaScript atau CSS dapat mengenali element mana kah yang akan mejadi target mereka.

Namun tentu saja terdapat karakteristik khusus yang berbeda karena pada dasarnya jika ditinjau dari nama nya saja sudah berbeda. 

Berikut penjelasan detail tentang Atribut Class dan Id :

1. Class

   Atribut Class digunakan untuk mengelompokkan beberapa element yang memiliki kesamaan dari segi tampilan atau style yang akan diatur oleh (CSS) atau melakukan manipulasi pada element yang di-handle oleh (JavaScript). Class sangat memungkinkan untuk dapat mempengaruhi atau meberikan effect untuk beberapa element yang sama sekaligus jika memiliki class attribute value yang sama.

   Contoh penggunaan:

   Berdasarkan sintax HTML di atas akan mendapatkan 3 buah element berbentuk persegi berwarna merah, dan 1 element berbentuk persegi berwarna biru.
   
   
   
   
   
   Gambar hasil output implementasi attribute Class dengan CSS pada HTML
   
   
   Mengapa begitu?
   
   Tentu saja karena ke 3 element di atas memiliki nilai/nama Class yang sama (class attribute value) yang sama, dan class box-red telah di-custom melalui CSS.
   <div class="box-red"><div>
   <div class="box-red"><div>
   <div class="box-red"><div>

   
   

   
   

2. ID

   Sesuai dengan namanya atribut ID digunakan untuk mendefinisikan identitas secara unix pada suatu element pada HTML. Oleh sebab itu hanya dapat digunakan untuk element tertentu secara spesifik saja yang dapat menggunakan CSS atau JavaScript.

   Jadi intinya sebuah nilai/nama ID (id attribute value) hanya dapat digunakan pada 1 element saja.

   Berikut contoh penggunaan Id pada HTML :

   Berikut hasil output Implementasi attribute ID pada HTML
   

   
   

   Gambar hasil output implementasi attribute ID dengan CSS pada HTML

   
   
   Pada contoh di atas, hanya element pertama yang memiliki id="black-box" yang akan diberi Memiliki background hitam dan warna text nya berubah menjadi putih karena id bersifat unik dan hanya dapat digunakan sekali dalam satu halaman.
   
   
   Meski begitu jika saya coba mengganti line 16 menjadi seperti ini :
       <div  id="black-box">Element lain!</div>
   Maka hasil outputnya jadi begini.
   

   Gambar hasil output implementasi attribute 1 ID pada 2 element berbeda

   
   
   Berarti sama dengan Class, ID pun dapat di implementasikan ke lebih dari 1 element.
   
   
   Ya, betul sekali, sama!!! Baru akan saya jelaskan penyebabnya.

   Memang benar sama namun terdapat fungsional yang hilang dari ID tersebut jika dipakasa untuk di implementasikan pada lebih dari 1 element.

   
   
   For now on, Let me show you a magic, Silahkan copy code berikut ini ke code editor anda lalu seve as .html dan buka file .html tersebut pada browser anda. 
   
   
   Dan hasilnya akan seperti pada gambar di bawah ini :
   
   
   
   Gambar ID's Magic Result
   
   
   Mengapa attribute Id harus memiliki nilai yang unix, alasanya ada pada gambar di atas, karena memungkinkan. Jika tedapat 2 element dengan ID yang sama maka button link di atas tidak akan me-redirect maka hanya akan meredirect ke id yang pertama saja.
   
   
   misalkan ID untuk element TOP dan BOTTOM saya ganti dengan ID BOTTOM semua maka ketika BOTTOM diklik akan mengarah ke TOP.
   
   
   Penerapan link yang memungkinkan untuk menuju ke bagian tertentu dalam suatu halaman disebut dengan Anchor. Anchor merupakan karakteristik kusus dari ID yang tidak dimiliki oleh Class, namun ingat hanya 1 value id pada setiap element jika tidak maka link hanya dapat merujuk ke ID yang pertama saja.

Perbedaan Class dan ID

Secara garis bedasar perbedaan Class dan ID adalah sebagai berikut :

	Class	ID
Target	grup atau dapat digunakan banyak element, misalkan list article pada homepage blog ini.	unix atau hanya 1 element
Selection	Menggunakan . (titik) : Contoh CSS: .box{...} Contoh JavaScript, terutama jQuery : $('.box').attr(...)	Menggunakan # (pagar) : Contoh CSS: #author{...} Contoh JavaScript, terutama jQuery : $('#author').attr(...)
Keunggulan	Dapat mengimplementasikan style (CSS) yang sama pada beberapa element. Memungkinkan membangun struktur CSS yang lebih modular dan mudah untuk dilakukan maintenance atau didevelop kembali.	Dapat mengidentifikasi atau menargetkan suatu element secara spesifik. Dapat memanipulasi element menggunakan JavaScript. Dapat membuat (anchor) untuk dapat menuju ke bagian tertentu dalam suatu halaman.

Apakah Class dan ID dapat digunakan pada 1 element yang sama?

Tentu saja bisa, berikut contoh penggunaan gabungan:

Dalam contoh di atas, paragraf kedua memiliki gaya hijau dari class="highlight" dan juga tebal karena id="unix".

Untuk hasilnya silahkan dicoba sendiri... Good luck!...

--o--

Dengan memahami attribute class dan id pada HTML sangat lah mambantu anda dalam mempelajari lebih lanjut tentang DOM (Document Object Model), dan manipulation DOM dengan JavaScript atau jQuery.

Sekian artikel pembahasan id dan class dari kami, banyak kekurang mohon maaf.
Terima kasih telah berkunjung.

~Semoga Bermanfaat~