Atribut id dan class

HTML menyediakan dua global attributes untuk memberi nama pada elemen: id dan class. Keduanya sama-sama berupa teks pada atribut, tetapi aturan dan kegunaannya berbeda. CSS memakai keduanya sebagai selector; JavaScript memakai keduanya untuk mencari elemen.

Aturan intinya singkat: id unik — satu nilai hanya untuk satu elemen per halaman; class bebas dipakai berulang pada banyak elemen sekaligus.

id: Satu Nama untuk Satu Elemen #

Nilai id berlaku seperti nomor identitas: satu halaman tidak boleh memuat dua elemen dengan nilai id yang sama. Contoh pemakaian untuk tautan internal:

<h2 id="kontak">Kontak Toko</h2>
<p>Alamat: Jl. Melati No. 7, Yogyakarta.</p>
<a href="#kontak">Kembali ke bagian kontak</a>

Mari kita telaah kode di atas:

1. Baris 1 (id="kontak"): memberi nama unik pada heading agar bisa dituju.
2. Baris 3 (href="#kontak"): tanda # diikuti nama id menjadikan tautan internal — saat diklik, halaman bergulir ke elemen tersebut.

Pemakaian id yang lazim: tujuan tautan internal (#nama), penghubung label for dengan kolom form, dan sasaran elemen spesifik untuk JavaScript.

class: Label yang Bisa Dipakai Bersama #

Nilai class bebas dipakai berulang pada elemen sebanyak apa pun. Satu elemen juga boleh memuat beberapa class sekaligus, dipisah spasi:

<li class="menu">Kopi susu</li>
<li class="menu">Teh melati</li>
<li class="menu unggulan">Cokelat panas</li>

Mari kita telaah kode di atas:

1. Baris 1-2 (class="menu"): dua elemen memakai label yang sama; satu selector CSS .menu menata semuanya.
2. Baris 3 (class="menu unggulan"): multi-class — elemen memuat dua label sekaligus; label kedua memungkinkan penataan tambahan khusus.

Multi-class inilah kekuatan utama class: kita bisa mengelompokkan elemen dari beberapa sudut sekaligus — menu, unggulan, habis — tanpa menduplikasi penataan.

Selector CSS membuktikan kedua hook bekerja. Kotak promo berikut dipilih lewat #promo, tiga baris menu lewat .menu-item, dan baris terakhir memuat dua class sekaligus sehingga kedua penataannya berlaku bersama:

Satu selector .menu-item menata tiga baris sekaligus — bukti bahwa class boleh dipakai berulang — sementara #promo hanya menunjuk satu elemen, sesuai aturan keunikan id.

Perbandingan id dan class #

Aturan Penamaan #

HTML sendiri hampir tidak membatasi isi id dan class — satu-satunya larangan tegas adalah spasi, karena spasi berperan sebagai pemisah class. Supaya nama aman dipakai di selector CSS dan JavaScript, ikuti pola aman industri: mulai dengan huruf, lanjutkan dengan huruf, angka, tanda hubung (-), atau garis bawah (_). Contoh penamaan yang baik: daftar-menu, artikel_utama, promo2.

Galat: id Duplikat #

Penulisan dua id bernilai sama adalah galat yang browser tidak laporkan di layar:

<p id="alamat">Jl. Melati No. 7</p>
<p id="alamat">Jl. Kenanga No. 3</p>

Kedua paragraf tetap tampil, tetapi fungsi document.getElementById("alamat") hanya mengembalikan elemen pertama, dan tautan #alamat hanya melompat ke elemen pertama. Elemen kedua sulit dituju. Perbaiki dengan nilai unik:

<p id="alamat-toko">Jl. Melati No. 7</p>
<p id="alamat-gudang">Jl. Kenanga No. 3</p>

Ringkasan #

• id unik per halaman; class boleh berulang dan multi-label.
• id untuk tautan internal, label for, dan sasaran JavaScript; class untuk penataan berkelompok.
• Penamaan aman: mulai huruf, lanjut huruf/angka/tanda hubung/garis bawah.
• id duplikat tidak terlihat di layar tetapi merusak getElementById dan tautan internal.

Chapter berikutnya membahas mekanisme penyimpan data kustom pada elemen: data attributes.