Menggunakan Atribut Class HTML dan Fungsinya
Pada artikel ini dijelaskan bagaimana peran dari atribut class dalam pemformatan HTML menggunakan kode CSS.
Sebelum memahami lebih dalam materi tentang Menggunakan Atribut Class HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Membuat Tanda Centang HTML Menggunakan Atribut Checked, Mendefinisikan Karakter Encoding HTML Menggunakan Atribut Charset, dan Fokus Otomatis HTML Menggunakan Atribut Autofocus.
Class pada html:
- class adalah atribut yang digunakan untuk menentukan satu atau lebih nama class untuk elemen html.
- atribut class dapat digunakan pada elemen html apapun.
- nama class dapat digunakan oleh CSS dan JavaScript untuk melaksanakan tugas tertentu untuk elemen dengan nama class spesifik.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
.country
{
background-color: black;
color: white;
padding: 8px;}
</style>
</head>
<body>
<h2 class="country">
CHINA
</h2>
<p>
Cina adalah negara dengan
populasi yang banyak.
</p>
<h2 class="country">
INDIA
</h2>
<p>
India adalah negara dengan
kaum dalit terbanyak.
</p>
<h2 class="country">
UNITED STATES
</h2>
<p>
Amerika adalah negara dengan
jumlah tentara yang banyak.
</p>
</body>
</html>
Output:
CHINA
Cina adalah negara dengan populasi yang banyak.
INDIA
India adalah negara dengan kaum dalit terbanyak.
UNITED STATES
Amerika adalah negara dengan jumlah tentara yang banyak.
Penjelasan: pada contoh program sebelumnya, adalah contoh elemen CSS style dengan nama class "country".
Menggunakan atribut class pada JavaScript: JavaScript dapat mengakses elemen dengan menentukan nama class menggunakan method getElemenByClassName().
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementsByClassName("country");
for (var i = 0; i < x.length; i++)
{x[i].style.display = "none";}
}
</script>
</head>
<body>
<p>
Klik, maka elemen akan
disembunyikan.
</p>
<button
onclick="myFunction()">
Hide elements
</button>
<h2 class="country">
CHINA
</h2>
<p>
Cina adalah negara dengan
jumlah populasi terbesar.
</p>
<h2 class="country">
INDIA</h2>
<p>
Indika adalah negara dengan
jumlah kaum dalit terbanyak.
</p>
<h2 class="country">
UNITED STATES</h2>
<p>
Amerika adalah negara yang
damai.
</p>
</body>
</html>
Output:
Klik, maka elemen akan disembunyikan.
CHINA
Cina adalah negara dengan jumlah populasi terbesar.
INDIA
Indika adalah negara dengan jumlah kaum dalit terbanyak.
UNITED STATES
Amerika adalah negara yang damai.
Menggunakan multiple class: elemen HTML dapat memiliki lebih dari satu nama class, dimana setiap nama class harus terpisah oleh spasi.
Contoh:
Contoh:
<!DOCTYPE html>
<html>
<style>
.country
{
background-color: black;
color: white;
padding: 10px;}
.middle
{
text-align: center;}
</style>
<body>
<h2 class="country middle">
CHINA
</h2>
<h2 class="country">
INDIA
</h2>
<h2 class="country">
UNITED STATES
</h2>
</body>
</html>
Output:
CHINA
INDIA
UNITED STATES
Penjelasan: Ketiga header memiliki nama class "country", tetapi pada penambahannya, CHINA juga memiliki nama class "middle", yang membuat teks menjadi rata tengah.
Menggunakan class yang sama pada tag yang berbeda: perbedaan tag seperti <h2> dan <p>, dapat diberikan nama class yang sama dan dapat berbagi style yang sama.
Contoh:
<!DOCTYPE html>
<html>
<style>
.country
{
background-color: black;
color: white;
padding: 10px;}
</style>
<body>
<h2 class="country">
CHINA
</h2>
<p class="country">
Cina adalah negara yang besar.
</p>
</body>
</html>
Output:
CHINA
Cina adalah negara yang besar.
Penjelasan: Meskipun dua elemen tidak memiliki tag name yang sama, tetapi elemen tersebut dapat memiliki nama class yang sama dan mendapat style yang sama pula.
Baca Juga:
Atribut class pada HTML adalah salah satu atribut yang sangat penting dan sering digunakan dalam pengembangan halaman web. Atribut ini memberikan cara untuk mengelompokkan elemen-elemen HTML yang memiliki fungsi atau karakteristik serupa, sehingga memudahkan pengaturan dan pengendalian elemen-elemen tersebut. Meskipun tampak sederhana, penggunaan atribut class memberikan fleksibilitas yang besar bagi pengembang dalam merancang tampilan dan interaksi sebuah halaman web.
Pada dasarnya, atribut class berfungsi untuk menetapkan identitas atau kelompok tertentu pada elemen HTML. Setiap elemen HTML, seperti div, p, atau span, dapat diberi nilai pada atribut class. Nilai ini biasanya berupa kata atau frasa yang menggambarkan kategori atau fungsi elemen tersebut dalam konteks halaman web. Dengan menetapkan nilai class pada elemen, pengembang dapat memberikan aturan gaya atau pengendalian lainnya melalui penataan gaya, atau bahkan menentukan perilaku elemen-elemen tersebut menggunakan bahasa pemrograman.
Salah satu manfaat utama dari atribut class adalah kemampuannya untuk memungkinkan pengembang mengelompokkan beberapa elemen HTML dalam satu kategori. Hal ini berguna ketika elemen-elemen tersebut memiliki penataan gaya yang serupa. Sebagai contoh, jika ada banyak elemen dengan tampilan yang serupa, seperti teks yang memiliki warna latar belakang tertentu atau elemen-elemen dengan ukuran font yang sama, pengembang dapat memberikan nilai class yang sama pada seluruh elemen tersebut. Dengan demikian, aturan penataan gaya yang diterapkan pada class tersebut akan diterapkan pada semua elemen yang memiliki class yang sama, sehingga memudahkan pengaturan tampilan halaman secara keseluruhan.
Penggunaan atribut class juga sangat berguna ketika pengembang bekerja dengan bahasa pemrograman seperti JavaScript. Dengan memberikan nilai class pada elemen-elemen tertentu, pengembang dapat dengan mudah menargetkan elemen-elemen tersebut untuk diberi interaksi tertentu, seperti perubahan gaya atau perilaku dinamis lainnya. Sebagai contoh, elemen-elemen yang memiliki class tertentu dapat dipilih dan dimanipulasi menggunakan JavaScript untuk menambahkan animasi atau mengubah posisi elemen sesuai dengan keinginan.
Fungsi lain dari atribut class adalah untuk meningkatkan keterbacaan dan pengelolaan kode HTML. Ketika halaman web menjadi semakin kompleks, dengan banyak elemen dan komponen yang harus diatur, memberikan class yang deskriptif pada elemen-elemen tersebut membuat kode lebih mudah dipahami dan dikelola. Hal ini sangat membantu pengembang dalam proses pengembangan jangka panjang, terutama saat bekerja dengan tim atau saat halaman web perlu diperbarui atau dipelihara di masa depan.
Selain itu, atribut class juga berperan dalam menciptakan halaman web yang responsif, yaitu halaman yang dapat menyesuaikan diri dengan berbagai ukuran layar, dari layar ponsel hingga layar komputer desktop. Dalam hal ini, class dapat digunakan bersama dengan aturan penataan gaya responsif yang dapat menyesuaikan tata letak dan ukuran elemen-elemen sesuai dengan lebar layar pengguna. Penggunaan class yang bijaksana memungkinkan elemen-elemen untuk beradaptasi dengan baik di berbagai perangkat, tanpa memerlukan perubahan besar pada struktur HTML.
Penggunaan atribut class tidak terbatas pada penataan gaya dan pengendalian elemen dengan bahasa pemrograman. Atribut ini juga sering digunakan dalam berbagai kerangka kerja penataan gaya atau pustaka JavaScript. Kerangka kerja penataan gaya seperti kerangka kerja CSS seringkali mengandalkan class untuk mengatur tampilan elemen-elemen halaman. Pustaka JavaScript juga sering menggunakan class untuk menargetkan elemen-elemen tertentu dan memberikan interaksi dinamis pada elemen tersebut, seperti penambahan animasi atau pengelolaan peristiwa pengguna.
Namun, dalam penggunaan atribut class, pengembang perlu memperhatikan beberapa hal agar penggunaannya tetap efisien dan tidak membingungkan. Pertama, nama class harus deskriptif dan jelas, agar mudah dimengerti oleh pengembang lain atau diri sendiri di masa depan. Nama class yang baik akan mencerminkan fungsi atau kategori elemen yang diwakilinya, sehingga pengembang dapat dengan cepat memahami tujuan penggunaan class tersebut.
Kedua, penting untuk menghindari penggunaan nama class yang terlalu umum atau ambigu. Nama class yang terlalu umum seperti "element" atau "item" dapat menyebabkan kebingungannya ketika mengelola banyak elemen dalam halaman web. Sebaliknya, penggunaan nama class yang lebih spesifik dan sesuai dengan konteks elemen akan membuat kode lebih terstruktur dan mudah diikuti.
Selain itu, penting untuk tidak memberikan class yang berlebihan pada elemen-elemen yang tidak memerlukan pengaturan khusus. Terlalu banyak class yang ditambahkan pada elemen dapat membuat kode HTML menjadi lebih rumit dan tidak efisien. Penggunaan class yang bijak akan mengurangi redundansi dalam kode dan memudahkan pengelolaannya.
Tidak hanya itu, pengembang juga harus memperhatikan urutan dalam mendefinisikan aturan penataan gaya pada class. Dalam beberapa kasus, urutan penulisan class dapat mempengaruhi cara aturan penataan gaya diterapkan. Jika aturan penataan gaya untuk beberapa class saling bertentangan, urutan penulisan aturan penataan gaya ini akan menentukan aturan mana yang diterapkan pada elemen tersebut. Oleh karena itu, pengembang harus memastikan bahwa aturan penataan gaya yang ditulis tidak saling bertentangan, agar hasil tampilan halaman web tetap sesuai dengan yang diinginkan.
Penggunaan atribut class yang efektif dapat mempercepat proses pengembangan dan mempermudah pemeliharaan halaman web. Ketika atribut class digunakan dengan baik, pengembang dapat membuat halaman web yang lebih terstruktur, responsif, dan mudah diatur. Selain itu, penggunaan class juga memungkinkan interaksi yang lebih dinamis dan menarik pada halaman web, yang dapat meningkatkan pengalaman pengguna.
Seiring dengan perkembangan teknologi web, penggunaan atribut class semakin menjadi salah satu elemen dasar dalam pengembangan halaman web. Atribut ini terus digunakan dan diperbarui seiring dengan perkembangan kerangka kerja dan pustaka baru yang dirancang untuk mempermudah pengembangan halaman web. Oleh karena itu, pemahaman yang baik tentang cara menggunakan atribut class sangat penting bagi pengembang web agar dapat membuat halaman web yang efektif dan efisien.
Secara keseluruhan, atribut class dalam HTML memainkan peran yang sangat penting dalam pengembangan halaman web. Fungsi utamanya yang memberikan identitas pada elemen-elemen HTML memungkinkan pengembang untuk mengelompokkan dan mengatur elemen-elemen tersebut dengan lebih mudah dan efisien. Selain itu, penggunaan class yang tepat dapat meningkatkan keterbacaan kode, mempercepat pengembangan, dan memungkinkan pembuatan halaman web yang responsif serta interaktif. Dengan memahami dan menggunakan atribut class dengan bijak, pengembang dapat menciptakan halaman web yang lebih terstruktur, dinamis, dan mudah dikelola.
Referensi Tambahan:
- 2 Nilai Utama pada Penggunaan Atribut Data HTML
- 2 Nilai Utama Penggunaan Atribut Data-* pada HTML
- 8 Komponen Pengaturan Penggunaan Atribut Datetime pada HTML
- 3 Nilai Utama Penggunaan Atribut Dir pada HTML
- 2 Contoh Utama Penggunaan Atribut Dirname pada HTML
- 7 Contoh Program Penerapan Atribut Disabled pada HTML
- 3 Nilai Utama Penggunaan Atribut Draggable pada HTML
Artikel ini akan dibaca oleh: Muchammad Bachtiar Al Majid, Muhammad Rifqi Hidayatullah, Muhammad Sultan Anwar, Nadhifah Setiadiani, dan R Daniel Vercelli.
6 komentar untuk "Menggunakan Atribut Class HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Bagaimana cara membuat class pada html?
BalasHapusUntuk memilih elemen dengan class tertentu pada html, ketik karakter titik (.), yang diikuti dengan nama class. User juga dapat menentukan bahwa hanya elemen HTML tertentu saja yang dapat terpengaruh oleh kelas yang telah dibuat tersebut.
HapusApa perbedaan antara atritbut ID dan atribut CLASS pada HTML?
BalasHapusPerbedaan antara atribut ID dan atribut Class pada html, adalah atribut ID bersifat unik hanya alam satu halaman tertentu saja, dan paling banyak dapat diterapkan pada satu elemen dalam dokumen html, sedangkan class dapat diterapkan paa beberapa elemen dalam dokumen html.
HapusApa yang dimaksud dengan class pada html dan css?
BalasHapusClass CSS merupakan atribut yang digunakan untuk mendefinisikan sekelompok elemen HTML guna diterapkan suatu pemformatan unik tertentu ke dalam elemen tersebut melalui kode CSS. Grup ini dapat berisi lebih satu jenis elemen ataupun lebih. Atribut class tidak memengaruhi makna semantik dari dokumen HTML itu sendiri.
Hapus