Tutorial HTML Lanjutan: Perbedaan atribut id dan class
Halo kawan-kawan,
Pada tutorial sebelumnya tentang "cara membuat internal link", kita telah membahas secara sekilas tentang atribut id. Pada kesempatan kali ini kita akan membahas lebih dalam terkait atribut id dan class serta melihat perbedaannya.
Perbedaan atribut id dan class
Atribut id dan class kebanyakan digunakan untuk pengkodean dengan CSS atau pemograman JavaScript, oleh sebab itu untuk pembahasan kali ini kita akan sedikit megunkan kode css.
Sebagai catatan, penjelasan akan lebih fokus pada atribut id dan class, untuk memahami lebih dalam kawan-kawan silakan membaca tutorial tentang CSS.
Perhatikan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut id dan Class</title>
<style type="text/css">
#menu {
font-weight:bold;
}
.merah {
font-size:70px;
color:red;
}
</style>
</head>
<body>
<ul id='menu'>
<li class='merah'>Beranda</li>
<li>Tutorial</li>
<li class='merah'>Berita</li>
<li>Video</li>
</ul>
</body>
</html>
Hasil Code:
Kesimpulan:
- atriut id menggunakan selector (#), sedangkan atribut class mengunakan selector (.)
- nilai atribut id hanya boleh dipakai 1 kali, sedankan atribut class dapat dipakai lebih dari sekali. Pada contoh diatas nilai atribut id yaitu menu tidak boleh lebih dari 1, sedangkan nilai atribut class yaitu merah dapat ditampilkan pada beberapa bagian.
- Kesimpulannya adalah, ketika 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.
Untuk memahami lebih jauh tentang kode diatas, kawan-kawan perlu belajar dahu tentang CSS. Kawan-kawan dapat lanjut membaca tentang tutorial-tutorial CSS pada blog ini.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2