Mengenal ID dan Class Pada HTML

Assalamu'alaikum Wr.Wb


A. PENDAHULUAN
Hallo Sahabat berjumpa lagi dengan saya, saya akan shering tentang Id dan Class pada HTML.

B. LATAR BELAKANG
Id dan Class bisa di bilang penanda pada HTML, maksud penanda di sini adalah element-element
HTML dapat di beri tanda dengan class atau id.

C. TUJUAN
Dapat di berikan pada banyak element HTML dan dapat di panggil.

D. PEMBAHASAN
 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.

E. KESIMP.ULAN

Semoga materi di atas dapat di mengerti dan di pahami oleh teman-teman.

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


Wassalamu'alaikum Wr.Wb