Atribut HTML class: Memberikan Kategori/Karakteristik Pada Elemen

Definisi dan penggunaan

Atribut class adalah salah satu atribut yang sering digunakan pada elemen HTML. Atribut class umumnya digunakan untuk kemudahan dalam mengakses elemen baik itu untuk kebutuhan konfigurasi CSS (CSS Selektor) ataupun untuk kebutuhan javascript (getElementsByClassName).


Type atribut

Atribut Global HTML


Sintak

<elemen class='nama-class'>
  <!-- konten -->
</elemen>

Keterangan
  • nama-class adalah berupa kombinasi karakter huruf (a-z), underscore (_), hyphen (-), dan nomor (0-9).
  • nama-class harus dimulai dengan huruf, underscore, atau hyphen.
  • Jika karakter pertama adalah hyphen, karakter kedua harus berupa huruf atau underscore. Contoh: -redcolor, -_redcolor
  • nama-class setidaknya terdiri dari 2 karakter
  • Setiap elemen bisa memiliki beberapa class yang dipisahkan dengan spasi (spasi, tab, dll). Contoh: redcolor bluecolor
  • Berbeda dengan atribut ID, nama-class tertentu bisa digunakan pada lebih dari satu elemen.



Best Practice Atribut class

Berikut adalah kasus umum yang sering diselesaikan dengan atribut class:
  • Menerapkan konfigurasi style tertentu untuk banyak elemen.
    Untuk kebutuhan ini, class digunakan sebagai selektor dalam konfigurasi CSS. Pada contoh berikut, class digunakan pada element-elemen yang hendak diatur dengan warna text merah.

    <div class='redcolor'>Konten</div>
    <p class='redcolor'>Konten</p>
    <p>Konten</p>
    .redcolor {
      color:red;
    }
    Konten

    Konten

    Konten

  • Menambahkan identitas tambahan pada elemen
    Selain digunakan sebagai pemegang banyak elemen, class juga sering digunakan untuk memberikan identitas tertentu pada elemen. Misal, pengembang hendak menambahkan class tertentu yang mengidentifikasikan jumlah kolom pada elemen.

    <b>Tabel 2 kolom</b>
    <div class='tabel-like col2'>
      <div>Konten 1</div>
      <div>Konten 2</div>
      <div>Konten 3</div>
      <div>Konten 4</div>
    </div>
    
    <b>Tabel 4 kolom</b>
    <div class='tabel-like col4'>
      <div>Konten 1</div>
      <div>Konten 2</div>
      <div>Konten 3</div>
      <div>Konten 4</div>
    </div>
    .tabel-like {
      display:flex;
      flex-wrap:wrap;
    }
    .tabel-like > *{
      border:1px solid #000;
      box-sizing:border-box;
      text-align:center;
    }
    .tabel-like.col2 > * {
      width:50%;
    }
    .tabel-like.col4 > * {
      width:25%;
    }
    Tabel 2 kolom
    Konten 1
    Konten 2
    Konten 3
    Konten 4

    Tabel 4 kolom
    Konten 1
    Konten 2
    Konten 3
    Konten 4

    Dengan contoh penerapan diatas, kita bisa memberikan konfigurasi CSS berbeda untuk class col2 dan col4 yang mengatur jumlah kolom untuk elemen yang bersangkutan.

    Bukankah bisa dengan menggunakan ID ?

    Ya bisa. Namun, ID harus bersifat unik dan hanya boleh digunakan pada satu elemen saja. Penggunaan class untuk mengatasi keterbatasan ini, jadi identifier yang bersangkut bisa digunakan lagi pada elemen lainnya jika dibutuhkan.

Bagikan ke:

Tambahkan komentar untuk:

Atribut HTML class: Memberikan Kategori/Karakteristik Pada Elemen
Butuh bantuan ?
Bagi anda yang memiliki pertanyaan seputar blogging atau hal lainnya yang masih berhubungan dengan situs wiBlogger.com ini, anda bisa menghubungi kami melalui email.

Khususnya untuk Blogger Template, anda bisa bergabung ke grup facebook untuk belajar dan diskusi bersama para pengguna blogger.com lainnya.

Blogger Template

×
Jangan tampilkan lagi