16. Id dan Class

HTML Dasar: Id dan Class

Pada pertmuan kali ini kita akan membahas 2 buah atribut global pada HTML yaitu atribut id dan atribut class.

Keduanya dikatakan sebagai atribut global karena bisa kita gunakan pada semua elemen HTML.

Mengenal Atribut Global `id`

Atribut id adalah singkatan dari identifier atau identity. Seperti namanya, ia berfungsi sebagai id / identitas unik dari setiap elemen.

Misal kita memiliki tiga buah tombol:

Kita bisa memberikan atribut id kepada 3 buah tombol di atas untuk kebutuhan identifikasi lebih lanjut.

Sintaks dan Aturan Nilai Id

Sintaks dari atribut id sama seperti penulisan atribut pada umumnya di dalam dokumen HTML:

<elemen id="nilai">

Dan untuk nilai dari atribut id, kita bisa memberikan nilai sesuka kita asalkan memenuhi aturan berikut:

harus memiliki setidaknya satu karakter (baik huruf, simbol mau pun angka)
tidak boleh mengandung karakter putih (seperti spasi, tab, atau ganti baris)

Opsional:

nilai dari atribut id harus diawali oleh huruf untuk menghindari masalah kompabilitas antar browser [1].

Tambahan:

Nilai dari atribut id bersifat case sensitive, sehingga nilai Jakarta berbeda dengan jAkArtA.
Nilai dari atribut id harus unik dalam satu halaman. Kita tidak boleh menggunakan satu id yang sama untuk lebih dari satu elemen.

Fungsi Atribut `id`

Fungsi atribut id adalah sebagai “pengait” terhadap suatu elemen tertentu pada dokumen HTML.

Sehingga jika kita ingin untuk memanipulasi SATU elemen tertentu pada HTML, baik memanipulasi gaya (style) dengan CSS, atau memberikan aksi dengan javascript (seperti misal ketika elemen tersebut diklik, aksi apa yang akan dilakukan), kita bisa menggunakan pengait id untuk mendapatkan elemen tersebut.

Contoh Penggunaan CSS

Agar lebih jelas, perhatikan 3 tombol HTML berikut:

Kita akan memberi warna hanya kepada tombol Register, bagaimana caranya?

Yang pertama harus kita lakukan adalah memberikan id kepada tombol register, kemudian menggunakan selector #<nama-id> dengan CSS.

Perhatikan contoh berikut:

<button>Login</button> <br>
<button id="tombol-register">Register</button> <br>
<button>Logout</button> <br>

CSS:

#tombol-register {
  background: red;
  color: white;
  padding: 8px;
}

Hasil keluaran:

Pembahasan tentang ini masuk dalam materi selector pada CSS.

Contoh Penggunaan Javascript

Pemberian atribut id pada suatu elemen juga bisa kita manfaatkan untuk memberi aksi pada elemen tersebut.

Coba klik tombol berwarna merah ini:

Aksi di atas merupakan hasil dari kode program berikut:

const tombolRegister = document.querySelector('#tombol-register')

tombolRegister.addEventListener('click', () => {
  alert('tombol merah diklik!')
})

Pemanggilan element tombol register berdasarkan id-nya terjadi pada kode berikut:

document.querySelector('#tombol-register')

Insyaallah kita akan membahas lebih lanjut tentang javascript pada seri tutorial yang akan datang.

Contoh Sebagai Fragment Identifier

Selain itu, atribut id pada dokumen HTML berfungsi sebagai fragment identifier.

Artinya, browser bisa menemukan suatu elemen dengan id tertentu jika URL ditambahkan dengan tanda #<nama-id>.

Contoh yang paling gampang adalah tutorial yang sedang kalian baca ini.

Semua sub-judul pada halaman ini rata-rata menggunakan tag <h2> mau pun <h3>, dan keduanya sama-sama memiliki id, bisa kalian cek melalui inspect element browser.

Misalkan kita mau kembali ke posisi atas, ke bagian sub judul “Mengenal Atribut Global Id”.

Teman-teman bisa kunjungi url di bawah:

/web/html/dasar/id-dan-class/#mengenal-atribut-global-id

Atau jika ingin ke bagian “Sintaks dan Aturan Nilai Id”, tinggal ganti saja url hashtag-nya menjadi seperti ini:

/web/html/dasar/id-dan-class/#sintaks-dan-aturan-nilai-id

Ketika diklik, browser akan melakukan scroll otomatis ke elemen dengan id yang sesuai. Teknik fragment identifier ini saya gunakan hampir di semua tulisan di blog ini untuk fitur Daftar Isi.

Mengenal Atribut Global `class`

Atribut global berikutnya adalah class. Fungsi dari atribut ini juga sama dengan atribut id: yaitu memberikan CSS dan Javascript akses untuk men-target suatu elemen pada HTML, baik untuk mengubah tampilannya atau untuk menambahkan suatu aksi tertentu.

Sintaks dan Aturan Nilai

Sintaks dari atribut class sama seperti penulisan atribut pada umumnya:

<elemen class="nilai">

Dan untuk nilai dari atribut class, ada beberapa ketentuan:

Harus diawali oleh huruf (a-z atau A-Z)
Bisa mengandung angka, huruf, dash (-), dan underscore (_)

Kita bisa menggunakan lebih dari satu class dengan memisahkannya menggunakan spasi.

Contoh:

<button class="btn btn-danger">
  Hapus Data
</button>

Pada sintaks di atas, element <button> memiliki dua buah class yaitu:

btn
dan btn-danger

Contoh Penggunaan CSS

Untuk melakukan styling CSS berdasarkan nama class suatu elemen, kita bisa menggunakan selector titik . lalu diikuti nama class-nya.

Misalkan kita memiliki css berikut:

.btn {
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.red {
  color: #f5392c;
}

.bg-red {
  background-color: #f5392c;
}

.blue {
  color: #4cc0e0;
}

.bg-blue {
  background-color: #4cc0e0;
}

.white {
  color: #fffafa;
}

Dan kita punya 4 tombol berikut:

Kita bisa mengubah gaya atau style dari tombol-tombol di atas dengan menambahkan nama class yang sudah didefinisikan di dalam CSS.

Di sini semua tombol saya berikan class btn:

<button class="btn">Merah</button>
<button class="btn">Putih Merah</button>
<button class="btn">Biru</button>
<button class="btn">Putih Biru</button>

Begini hasilnya:

Dan ketika saya tambahkan kelas yang berbeda-beda seperti ini:

<button class="btn bg-red white">Merah</button>
<button class="btn red">Putih Merah</button>
<button class="btn bg-blue white">Biru</button>
<button class="btn blue">Putih Biru</button>

Hasilnya terlihat lebih variatif:

Contoh Penggunaan Javascript

Untuk penggunaan javascript contohnya sama saja.

Kita hanya perlu mengganti selector # menjadi . jika menggunakan fungsi document.querySelector.

Perhatikan contoh berikut:

<button class="tombol">
  Klik <span class="hasil"></span>
</button>

<script>
  const tombol = document.querySelector('.tombol')
  const hasil = tombol.querySelector('.hasil')

  tombol.addEventListener('click', () => {
    hasil.innerHTML = parseInt(hasil) + 1
  })
</script>

Hasil keluaran dari kode di atas adalah seperti ini:

Coba klik tombol di atas dan lihat hasilnya.

Kesimpulan

Atribut id dan atribut class adalah dua buah atribut global yang berfungsi untuk memberikan identitas dan pengelompokan terhadap suatu elemen HTML.

Perbedaan antara keduanya adalah:

atribut id bersifat unik, nama id tidak boleh dipakai lebih dari satu kali di dalam satu halaman HTML
sedangkan nilai dari atribut class bisa digunakan berkali-kali.
atribut id tidak boleh memiliki karakter putih seperti spasi, sedangkan atribut class boleh menggunakan spasi jika satu element memiliki lebih dari satu class.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang tag iframe pada dokumen HTML.

Stay tune!

Referensi

[1] - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#:~:text=Though%20this%20restriction%20has%20been%20lifted%20in%20HTML5%2C%20an%20ID%20should%20start%20with%20a%20letter%20for%20compatibility – diakses tanggal 17 Juli 2021

16. Id dan Class

HTML Dasar: Id dan Class

Mengenal Atribut Global id

Sintaks dan Aturan Nilai Id

Fungsi Atribut id

Contoh Penggunaan CSS

Contoh Penggunaan Javascript

Contoh Sebagai Fragment Identifier

Mengenal Atribut Global class

Sintaks dan Aturan Nilai

Contoh Penggunaan CSS

Contoh Penggunaan Javascript

Kesimpulan

Kode Program Lengkap

Pertemuan Selanjutnya

Referensi

Mengenal Atribut Global `id`

Fungsi Atribut `id`

Mengenal Atribut Global `class`