Mengenal Attribute ID dan CLASS di HTML 5
Attribute ID dan CLASS sering dipakai dalam membangun tampilan website, baik untuk memanipulasi tampilan dengan menggunakan CSS maupun JavaScript. Kedua attribute ini berfungsi sebagai penanda suatu tag elemen, misalnya kalian mempunyai tiga tagdiv yang mempunyai lebar dan tinggi 100px dan kalian hanya ingin merubah background div pertama menjadi biru, maka kalian bisa menggunakan salah satu dari attribute Id atau Class. Maka dari itu, keduanya sering digunkanan karena memang fungsinya yang bisa berguna untuk membuat tampilan website menjadi menarik.Perbedaan antara Attribute ID dan CLASS
Perbedaan antara ID dan class adalah bahwa ID dapat digunakan untuk mengidentifikasi satu elemen, sedangkan class dapat digunakan untuk mengidentifikasi lebih dari satu. Gunakan class ketika kalian ingin beberapa elemen memiliki gaya tampilan secara konsisten di seluruh halaman / situs. Class berguna ketika kalian memiliki, atau mungkin akan memiliki lebih dari satu elemen dengan gaya yang sama. Contohnya mungkin tampilandiv "komentar". Selain itu, elemen yang diberikan dapat memiliki lebih dari satu class dan hanya satu id. Sebagai contoh, kalian dapat memberikan dua class pada div yang gaya keduanya akan berlaku pada elemen tersebut. Gunakan id ketika kalian memiliki satu elemen pada halaman yang akan mengambil gaya, dan ingat bahwa id harus unik. Dalam kasus ini mungkin opsi yang benar, karena mungkin hanya akan ada satu (utama) pada halaman. Contoh id adalah: konten utama, header, footer, atau sidebar karena dalam satu halaman tidak mungkin memiliki dua header ataupun lebih.Untuk lebih jelasnya kita bisa melihat contoh kode berikut :
CSS
*{
margin: 0;
padding: 0;
}
.panjang{
width: 100%;
}
#header{
height: 5em;
background: salmon;
line-height: 5em;
padding-left: 1.5em;
}
#navbar{
background: #f2f2f2;
color: #1E1C1C;
height: 3em;
line-height: 3em;
}
.text{
font-family: sans-serif;
}
.biru{
background: #4155EC;
}
.jumbotron{
height: 70vh;
display: block;
background: #4A52EB;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header id="header" class="panjang"><h2>Header</h2></header>
<div id="navbar" class="panjang text biru">navigasi</div>
<div class="panjang text jumbotron"></div>
</body>
</html>
Tampilan di browser :
Pada source code di atas attribute id hanya ada satu baik itu dalam elemen dan dalam halaman tersebut, maksudnya atrribute ini tidak bisa ada dua dalam satu halaman. Sedangkan attribute class bisa digunakan sebanyak yang kita butuhkan, jadi, dalam satu elemen kita bisa menggunakan banyak class dan class tersebut bisa kita gunakan lagi di element lain walaupun masih berada dalam satu halaman. Kta bisa mengibaratkannya ID sebagai sidik jari dan CLASS sebagai pakaian, karena setiap orang akan memiliki sidik jari yang berbeda-beda sedangkan pakaian bisa sama satu dengan yang lain ataupun berbeda. Sekian artkel kali ini, semoga bermanfaat.
0 komentar:
Posting Komentar