Apa Itu Selector ID dan CLASS dalam HTML

by | Dec 30, 2017 | HTML CSS | 0 comments

Hallo Sahabat Dumenity berjumpa lagi dalam tutorial Dumetschool, pada tutorial kali ini saya akan membahas tentang APA ITU  SELECTOR ID DAN CLASS DALAM HTML. Selector id yaitu selector yang digunakan untuk penamaan dalam elemen HTML tujuan untuk memudahkan penulis dalam pengaturan di CSS. Begitu juga dengan Class. Cuman dari keduanya terdapat perbedaan jika ID bersifat unik hanya boleh satu id dalam satu file HTML tidak boleh lebih sedangkan class boleh digunakan berulang – ulang. Oke langsung saja kita akan mempraktekkannya.  Pertama teman – teman siapkan dulu text-editornya, karena penulis akan membuat script HTML dan CSS, di sini saya mengguanakan Sublime Text untuk menuliskan scriptnya

Bagi seorang pemula, ketika masih belajar HTML & CSS pasti menanyakan kenapa ada dua atribut ID dan Class, karena atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?

ID

Atribut ID digunakan untuk penamaan bagian HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih bagian tag HTML yang mempunyai ID yang sama. Perhatikan contoh berikut :

  1. <div id=‚menu‛>
  2. <ul id=‚menu‛>
  3. <li>Beranda</li>
  4. <li>Tutorial</li>
  5. </ul>
  6. </div>

Penggunaan atribut ID pada contoh di atas adalah salah, karena terdapat dua ID yang sama, yaitu “menu” pada tag <div> dan <ul>.

Perhatikan contoh sebelumnya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.

Class

Class digunakan untuk penamaan bagian HTML yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut :

  1. <ul id=‚menu‛>
  2. <li class=‚hijau‛>Beranda</li>
  3. <li>Tutorial</li>
  4. <li class=‚merah‛>Berita</li>
  5. <li>Video</li>
  6. </ul>

Pada script HTML di atas, saya menggunakan class hijau pada beberapa beberpa  bagian HTML, karena nantinya bagian tersebut yang memiliki class hijau akan diberi warna background-color hijau.

Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.

Oke itulah sedikit ilmu dari saya semoga bermanfaat bagi teman-teman semuanya.