HTML class attribute digunakan untuk memberikan satu atau lebih nama kelas pada elemen HTML. Kelas ini dapat digunakan untuk mengidentifikasi dan mengelompokkan elemen-elemen yang memiliki karakteristik atau fungsi yang serupa.
Berikut adalah contoh penggunaan HTML class attribute
<!DOCTYPE html>
<html>
<head>
<style>
.merah {
color: red;
}
.besar {
font-size: 24px;
}
</style>
</head>
<body>
<h1 class="merah besar">Ini adalah judul dengan kelas merah dan besar</h1>
<p class="merah">Ini adalah paragraf dengan kelas merah</p>
<p class="besar">Ini adalah paragraf dengan kelas besar</p>
</body>
</html>Output:
See the Pen Penggunaan HTML class Attribute by De Orchids (@De-Orchids) on CodePen.
Dalam contoh di atas, kita menggunakan class attribute untuk memberikan kelas “merah” dan “besar” pada elemen-elemen HTML. Kelas “merah” digunakan untuk mengubah warna teks menjadi merah, sedangkan kelas “besar” digunakan untuk mengubah ukuran font menjadi 24px.
Dengan menggunakan class attribute, kita dapat dengan mudah mengubah tampilan elemen-elemen HTML yang memiliki kelas yang sama. Misalnya, jika kita ingin mengubah warna teks semua elemen dengan kelas “merah” menjadi biru, kita hanya perlu mengubah satu baris kode CSS di dalam tag <style>, seperti ini:
.merah {
color: blue;
}Dengan demikian, semua elemen dengan kelas “merah” akan berubah warna teksnya menjadi biru.
Penggunaan HTML class attribute sangat berguna dalam pengembangan web, terutama ketika kita ingin mengatur tampilan elemen-elemen HTML secara terpisah berdasarkan karakteristik atau fungsi yang serupa. Dengan menggunakan kelas, kita dapat dengan mudah mengelompokkan dan mengubah tampilan elemen-elemen tersebut tanpa harus mengubah satu per satu.
Leave a Reply