Class dan ID HTML: Memberi Label Elemen Supaya Mudah Dicari

Di artikel atribut kamu sudah berkenalan dengan id dan class untuk pertama kalinya, dan sudah tahu perbedaan utamanya: id itu unik, class itu dipakai bersama. Itu versi satu kalimatnya. Tapi dua atribut ini begitu sering dipakai dan begitu penting di proyek nyata, sampai keduanya pantas dibahas tersendiri secara lebih dalam.

Hampir setiap baris CSS yang nanti kamu tulis, dan sebagian besar JavaScript-mu, bergantung pada kemampuan menunjuk elemen yang tepat. Class dan id inilah pegangan yang kamu pasang di sebuah elemen supaya dua lapisan lain bisa meraihnya. Begitu kamu terbiasa dengan keduanya sekarang, sisa perjalanan belajar frontend bakal terasa jauh lebih jelas.

Setelah membaca artikel ini, kamu akan tahu persis cara menulis class dan id, aturan yang dipaksakan oleh browser, bagaimana CSS dan JavaScript memakainya secara berbeda, serta kebiasaan penamaan yang mencegah proyekmu jadi berantakan.

Kenapa elemen perlu label

Sebuah halaman web itu pohon yang berisi banyak elemen — puluhan, kadang ribuan. Ketika kamu ingin membuat satu paragraf jadi biru, menyembunyikan satu menu, atau menjalankan kode saat satu tombol diklik, kamu butuh cara untuk bilang “yang itu, bukan yang lain.”

Kamu memang bisa menargetkan elemen lewat nama tag-nya saja, tapi itu seperti palu godam — terlalu kasar. Menulis aturan untuk p akan menata semua paragraf di halaman. Padahal yang biasanya kamu mau lebih spesifik: “paragraf yang termasuk bagian intro,” atau “tombol ajakan yang ini.” Ketepatan seperti itulah yang diberikan class dan id. Keduanya adalah nama yang kamu lekatkan ke elemen supaya bisa kamu rujuk lagi nanti.

<p class="intro">Paragraf ini termasuk kelompok intro.</p>
<button id="checkout">Bayar</button>

class="intro" berarti ini salah satu paragraf intro. Sementara id="checkout" berarti ini tombol bayar yang spesifik itu. Kedua atribut ini sendirian tidak mengubah tampilan maupun perilaku elemen — keduanya cuma label, tidak lebih. Manfaatnya baru muncul saat CSS dan JavaScript memakainya.

Mengenal atribut class lebih dekat

Class adalah label bersama. Dua ciri utamanya: banyak elemen boleh punya class yang sama, dan satu elemen boleh punya banyak class.

Satu class, banyak elemen

Beri sekelompok elemen class yang sama, lalu kamu bisa menata atau mengolah semuanya sekaligus:

<div class="card">Produk pertama</div>
<div class="card">Produk kedua</div>
<div class="card">Produk ketiga</div>

Ketiga div itu berbagi class card. Nanti, satu aturan CSS untuk .card saja sudah menata ketiganya — atur padding, border, dan bayangannya sekali, semua kartu langsung kebagian. Itulah inti dari class: definisikan tampilan atau perilaku sekali, pakai ulang di mana-mana.

Banyak class, satu elemen

Atribut class pada satu elemen boleh menampung beberapa nama class sekaligus, dipisahkan spasi:

<button class="btn btn-primary btn-large">Beli sekarang</button>

Tombol itu membawa tiga class: btn, btn-primary, dan btn-large. Masing-masing menyumbang sesuatu — btn untuk tampilan tombol dasar, btn-primary untuk warnanya, btn-large untuk ukurannya. Kamu meraciknya seperti bahan masakan, tinggal kombinasikan. Begitulah cara design system tetap luwes: class-class kecil berfungsi tunggal yang bisa digabung-gabung.

Cara CSS menargetkan class

Di CSS, kamu memilih sebuah class dengan menaruh tanda titik (.) di depan namanya. Kamu belum perlu paham CSS secara mendalam — cukup perhatikan polanya:

.card {
  border: 1px solid #ddd;
  padding: 16px;
}

Aturan itu masuk ke dalam HTML, mencari setiap elemen yang class-nya mengandung card, lalu menerapkan style-nya. Titik itu adalah penanda “ini nama class.” Tambahkan class="card" ke elemen baru di HTML, dan elemen itu langsung ikut tertata — tanpa perlu CSS tambahan.

Cara JavaScript menargetkan class

JavaScript juga bisa mengambil elemen berdasarkan class. Metode yang umum adalah querySelectorAll, dan kamu memberinya selektor .card yang sama persis seperti di CSS:

const cards = document.querySelectorAll(".card");
console.log(cards.length); // 3

Itu mengembalikan setiap elemen yang cocok, sehingga kodemu bisa mengulanginya — misalnya memasang penangan klik ke tiap kartu. Sekali lagi, selektor .card yang sama berfungsi baik di CSS maupun JavaScript, dan itu salah satu alasan kenapa class begitu sentral.

Mengenal atribut id lebih dekat

id adalah label unik. Kalau class bilang “salah satu dari ini,” maka id bilang “satu-satunya.”

<header id="top">...</header>
<main id="content">...</main>
<footer id="bottom">...</footer>

Tiap id itu idealnya muncul persis satu kali di halaman. id="content" menunjuk satu elemen spesifik dan tidak ada yang lain. Keunikan itulah karakter utama sebuah id: ia adalah alamat presisi untuk satu elemen tunggal.

Cara CSS dan JavaScript menargetkan id

Di CSS, kamu memilih id dengan tanda pagar (#), bukan titik:

#content {
  max-width: 800px;
  margin: 0 auto;
}

Di JavaScript, cara paling bersih untuk mengambil satu elemen adalah getElementById, yang menerima nama id tanpa tanda #:

const main = document.getElementById("content");

Ada juga querySelector("#content") kalau kamu lebih suka gaya selektor. Apa pun caranya, karena id-nya unik, kamu pasti dapat tepat satu elemen — tanpa perlu mengulang, tanpa perlu menebak yang mana yang kamu maksud.

id juga berfungsi sebagai jangkar halaman

Ini sudah pernah kamu lihat di artikel tautan dan gambar: sebuah id sekaligus jadi tujuan yang bisa kamu tautkan. Pasang id di sebuah heading, lalu tautan dengan # ditambah id itu akan langsung melompat ke sana:

<h2 id="harga">Harga</h2>
...
<a href="#harga">Loncat ke harga</a>

Klik tautan itu, dan browser menggulir turun ke heading harga. Begitulah cara kerja navigasi dalam halaman dan tautan “kembali ke atas”, dan ini tugas yang hanya bisa dilakukan id — class tidak bisa dijadikan tujuan tautan.

id menghubungkan label ke kolom form

Satu lagi tugas penting id, yang sudah kamu temui di artikel form dan input: atribut for pada <label> menunjuk ke id sebuah input untuk mengikat keduanya:

<label for="email">Email</label>
<input type="email" id="email" />

Karena for="email" cocok dengan id="email", mengklik label-nya otomatis memfokuskan input — lebih enak dipakai dan lebih ramah aksesibilitas. Pasangan inilah salah satu pemakaian id yang paling umum dan paling sah dalam HTML sehari-hari.

id vs class: pilih yang mana, kapan?

Begini cara memutuskannya secara sederhana. Pakai class saat kamu mendeskripsikan kategori elemen — apa pun yang mungkin kamu butuhkan lebih dari satu, atau apa pun yang sedang kamu tata tampilannya. Pakai id saat kamu perlu menunjuk satu elemen spesifik, biasanya sebagai tujuan tautan atau pegangan untuk sepotong JavaScript tunggal.

Ada juga alasan teknis kenapa para penata tampilan lebih suka class: di CSS, selektor id itu “lebih berat” daripada selektor class, sehingga aturan berbasis id bisa jadi keras kepala dan susah ditimpa belakangan. Konsep ini akan kamu temui secara formal saat belajar specificity di CSS. Untuk sekarang, cukup tahu bahwa bersandar pada class membuat tampilanmu lebih mudah ditebak.

Aturan penamaan yang diperhatikan browser

Sebagian besar waktu kamu bebas menamai sesuka hati, tapi ada beberapa aturan yang perlu kamu tahu supaya tidak tersandung.

• Huruf besar-kecil berpengaruh. class="Card" dan class="card" itu dua class berbeda, dan id="Top" tidak sama dengan id="top". Pilih satu gaya penulisan huruf lalu konsisten — huruf kecil adalah konvensi yang dominan.
• Tidak ada spasi di dalam satu nama. Seperti dibahas di atas, spasi memulai class baru. Pakai tanda hubung untuk menyambung kata.
• id harus unik. Dua elemen dengan id yang sama itu HTML yang tidak valid. Halamannya mungkin tetap tampil, tapi getElementById hanya akan menemukan yang pertama, dan ini memicu bug yang membingungkan.
• Hindari mengawali nama dengan angka kalau bisa. Nama seperti id="1kolom" menimbulkan masalah sungguhan di selektor CSS. Mulai dengan huruf, dan kamu tidak perlu memikirkannya lagi.

Konvensi penamaan yang menjaga kewarasan

Browser hanya memaksakan aturan di atas, tapi di proyek nyata gaya penamaanmu sama pentingnya. Nama yang baik membuat basis kode mudah dibaca; nama yang membingungkan mengubahnya jadi tebak-tebakan.

• Gambarkan tujuannya, bukan tampilannya. class="error-message" tetap bermakna walau nanti kamu mengubah warna error dari merah ke oranye. Sedangkan class="red-text" langsung berbohong begitu desainnya berubah.
• Konsisten. Kebanyakan tim memakai kata-kata huruf kecil yang disambung tanda hubung — class="nav-link", class="product-card". Gaya ini kadang disebut kebab-case, dan enak dibaca.
• Hindari nama tanpa makna. class="x1", class="div2", class="thing" tidak memberi tahu apa pun ke orang berikutnya (yang sering kali adalah dirimu sendiri di masa depan). Beberapa karakter ekstra demi kejelasan itu jauh lebih murah daripada kebingungan yang ditimbulkannya.

Nanti kamu akan ketemu sistem penamaan yang lebih terstruktur — BEM salah satu yang populer, yang memberimu pola seperti card__title dan card--featured. Kamu belum butuh itu sekarang. Nama yang jelas, deskriptif, dan disambung tanda hubung sudah cukup membawamu jauh.

Contoh kecil yang merangkai semuanya

Berikut potongan kode mungil tapi realistis yang memakai kedua atribut persis seperti yang kamu temui di kode sungguhan:

<section id="fitur" class="section">
  <h2 class="section-title">Yang kamu dapat</h2>

  <article class="feature-card">
    <h3 class="feature-card__title">Cepat</h3>
    <p class="feature-card__text">Termuat dalam hitungan milidetik.</p>
  </article>

  <article class="feature-card">
    <h3 class="feature-card__title">Aman</h3>
    <p class="feature-card__text">Terenkripsi dari ujung ke ujung.</p>
  </article>
</section>

Baca seperti manusia, bukan seperti mesin. id="fitur" adalah jangkar unik — kamu bisa menautkannya dari menu navigasi lewat #fitur. Sementara class="section" dan class="feature-card" adalah kategori bersama: ada dua feature card di sini, dan satu aturan CSS untuk .feature-card akan menata keduanya secara identik. Nama yang disambung tanda hubung dan menggambarkan tujuan itu langsung memberi tahu kamu setiap elemen itu apa, sekali pandang. Itulah class dan id bekerja persis seperti yang diharapkan.

Penutup

Class dan id adalah atribut kecil dengan peran yang besar: keduanya cara kamu memberi nama pada elemen supaya CSS bisa menatanya dan JavaScript bisa menemukannya.

• class adalah label bersama. Banyak elemen boleh punya class yang sama, dan satu elemen boleh punya beberapa class (dipisah spasi). CSS menargetkannya dengan titik (.card); JavaScript dengan querySelectorAll(".card").
• id adalah label unik — persis satu per halaman. CSS menargetkannya dengan pagar (#content); JavaScript dengan getElementById("content"). id juga berfungsi sebagai jangkar tautan dan menyambung <label> ke input lewat for.
• Untuk styling, andalkan class dulu. Simpan id untuk tugas yang memang cuma bisa dia lakukan — jangkar dan label form.
• Patuhi aturannya (peka huruf besar-kecil, tanpa spasi di dalam, id harus unik, jangan diawali angka) dan namai sesuai tujuan dengan nama huruf kecil yang disambung tanda hubung.

Atribut-atribut ini adalah jaringan penghubung dalam pengembangan frontend. Begitu kamu mulai menulis CSS sungguhan, kamu akan terus-menerus memakai selektor .class — dan sekarang kamu paham persis apa yang ditunjuk selektor itu dan kenapa.