Apa itu class dan id pada html?

Assalamu'alaikum Wr.Wb

Sleepingcodings - Class dan Id merupakan cara / perantara untuk menghubungkan HTML dengan CSS, namun kalau Author simpulkan Class dan Id ini seperti nama panggilan, jadi kita memberi nama pada tag menggunakan Class atau Id, Penggunaan Class dan Id sangatlah penting loh. Oh iya, maksud dari nama panggilan pada HTML disini ialah element" HTML dapat diberi nama panggilan dengan class atau id, untuk apa sih di beri nama ?, yah agar mudah manggilnya donk :v, kayak kalau kamu punya pacar nama nya si A kamu manggilnya sayank kan biar gampang :v, nah kegunaannya agar dapat di manipulasi menggunakan CSS atau JavaScript. Bayangan sederhananya jika anda memiliki lima buah kotak, semua kotak yang anda miliki berawarna biru, kemudian teman" ingin mengubah kotak yang pertama, nah disinilah letak kegunaan class dan id, untuk memberikan nama panggilan pada kotak teman" agar bisa diubah dan kotak yang lain tidak akan berubah.

MENGENAL Class dan Id pada HTML
Nah, Class dan Id punya perbedaan loh, bahkan perbedaannya sangat mencolok, yaitu Perbedaan Class dan Id adalah Class dipanggil pada CSS atau JavaScript dengan menggunakan tanda titik ".", dan Id dipanggil pada CSS atau JavaScript dengan tanda pagar "#". Nah kelebihan dari Class yaitu Class dapat memberikan nama pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan Id hanya dapat bekerja pada satu nama panggilan saja, maksudnya satu nama panggilan Id hanya bisa diberikan pada satu element saja, perhatikan pada contoh berikut untuk memberikan pemahaman lebih tentang Class dan Id pada HTML ini.

index.html

<!DOCTYPE html>
<html>
<head>
<title>sleepingcoding.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<h2>Memperdalam pengenalan Class dan Id pada HTML<br/>sleepingcodings.blogspot.com</h2>
<!-----------Contoh Penggunaan Class ---------------->
<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>

<!------------Contoh Penggunaan Id------------------->
<div id="kotak">kotak 4</div>
<div id="kotak">kotak 5</div>
</body>
</html> 

style.css

h2 {
color: purple;
font-family: sans-serif;
text-align: center;
}

.kotak {
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: purple;
}

#kotak {
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}

dan coba jalankan pada browser, maka hasilnya akan seperti gambar dibawah ini : 

Apa itu class dan id pada html?
Gambar 1.1 Mengenal Class dan Id pada HTML

Apa itu class dan id pada html?
Gambar 1.2 Mengenal Class dan Id pada HTML

Apa itu class dan id pada html?
Gambar 1.3 Mengenal Class dan Id pada HTML

Apa itu class dan id pada html?
Gambar 1.4 Mengenal Class dan Id pada HTML



Nah, perhatikan contoh gambar diatas, kotak1, kotak2, dan kotak3 termasuk Div Class yang kita beri nama panggilan "kotak", dan sedangkan kotak 4 dan 5 kita beri nama panggilan pada Div Id-nya yaitu "kotak" juga, maka perbedaannya di sini akan tampak sangat amat jelas, bahwa Class bisa dipanggil sekaligus, ini di buktikan dengan kotak 1,2 dan 3 diberi nama panggilan Class yang sama yaitu Class "kotak", dan kotak 4 dan 5 kita beri nama panggilan dengan Id "kotak".

KESIMPULAN
Nah, mudah-mudah gampangkan pada tutorial kali ini, Inti sari dari Tutorial kali ini ialah penggunaan dan perbedaan div id dan div class, Nah div Id dan div Class ini perbedaannnya ialah Class dapat memberikan nama pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan Div Id hanya dapat bekerja pada satu nama panggilan saja. Nah itu tadi tutorial tentang penggunaan Div Class dan Id. Sekian Tutorial kali ini, ikuti Tutorial selanjutnya ya Friends.

Semoga Bermanfaat ~ 

Wassalamu'alaikum Wr. Wb

Apa itu id dan class pada HTML?

Atribut id dan atribut class adalah dua buah atribut global yang berfungsi untuk memberikan identitas dan pengelompokan terhadap suatu elemen HTML. Perbedaan antara keduanya adalah: atribut id bersifat unik, nama id tidak boleh dipakai lebih dari satu kali di dalam satu halaman HTML.

Apa itu id dalam HTML?

ID merupakan selector yang digunakan oleh satu tag html, ini adalah yang disarankan, karena ID itu sendiri hanya boleh digunakan untuk satu tag html. Setiap elemen hanya dapat memiliki satu tag id.

Apa itu atribut class pada HTML?

Atribut class digunakan untuk mengelompokkan atau mengklasifikasi beberapa tag atau elemen HTML. Beberapa tag dapat menggunakan atribut class yang sama.

Apa fungsi dari atribut id?

Pada atribut ID, digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik atau berbeda. Tidak diperkenankan ada dua elemen yang memiliki ID yang sama.