Dokumentasi HTML interaktif: Atribut

Q: Apa perbedaan class dan id di HTML?

Sebuah id harus unik di satu halaman dan menandai satu elemen, untuk link #fragment, dan getElementById. Sebuah class bisa dipakai bersama oleh banyak elemen, dan satu elemen bisa punya beberapa class yang dipisahkan spasi. Pakai class untuk styling.

Q: Bagaimana cara menambahkan beberapa class ke satu elemen HTML?

Tulis semuanya di satu atribut class, dipisahkan spasi: . Menulis class dua kali tidak berhasil: browser hanya menyimpan yang pertama.

Q: Kenapa tombolku masih nonaktif dengan disabled="false"?

disabled adalah atribut boolean: keberadaannya berarti true, apa pun nilainya. Untuk mengaktifkan elemen, hapus atributnya, atau atur button.disabled = false di JavaScript, yang akan menghapusnya.

Q: Bolehkah aku membuat atribut HTML sendiri?

Pakai awalan data-: data-price="12" atau data-user-id="7" valid di elemen mana pun dan bisa dibaca di JavaScript lewat element.dataset. Nama buatan sendiri tanpa awalan itu tidak valid di HTML.

Atribut HTML: Sintaks, class, id, data-* dan Atribut Boolean

Atribut menambahkan informasi ke elemen HTML: ke mana link mengarah, gambar apa yang ditampilkan, class CSS mana yang berlaku. Pelajari sintaksnya, atribut global yang diterima semua elemen, class dan id, atribut boolean, dan atribut data-*.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Apa itu atribut HTML

Atribut menambahkan informasi ke sebuah elemen. Atribut ditulis di dalam tag pembuka, berupa nama, tanda sama dengan, dan nilai di dalam tanda kutip: name="value". Satu elemen boleh punya atribut sebanyak apa pun, dipisahkan spasi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href memberi tahu link ke mana harus pergi, src dan alt menjelaskan gambar, type, placeholder dan required mengatur input. Setiap elemen punya kumpulan atributnya sendiri, dan beberapa atribut (atribut global di bawah) berlaku di semua elemen.

Aturan sintaks

<input type="text" name="city" value="Paris" disabled>

Nama, tanda sama dengan, nilai dalam tanda kutip. Tanda kutip ganda adalah konvensinya; tanda kutip tunggal juga bisa (title='Say "hi"' adalah cara menaruh tanda kutip ganda di dalam nilai).
Nama tidak peka huruf besar kecil. CLASS dan class adalah atribut yang sama. Nilainya peka: class="Box" dan class="box" adalah dua class yang berbeda.
Tanda kutip opsional tanpa spasi, tapi tetap pakai. class=big box memberi elemen class big dan atribut kedua yang tidak bermakna bernama box.
Urutan tidak berpengaruh. <img alt="" src="a.png"> sama dengan <img src="a.png" alt="">.
Setiap nama sekali per elemen. Kalau sebuah atribut muncul dua kali, browser menyimpan yang pertama dan diam-diam membuang yang kedua.

Atribut boolean

Beberapa atribut hanya punya dua keadaan: aktif atau tidak. Untuk atribut ini, keberadaannya berarti true, dan nilainya diabaikan. disabled, checked, required, readonly, hidden, multiple, autofocus dan open semuanya bekerja seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Tombol ketiga tetap nonaktif walaupun nilainya false, karena browser hanya memeriksa apakah atributnya ada. Untuk mematikan atribut boolean, hapus atributnya. Di JavaScript, button.disabled = false melakukan persis hal itu.

Atribut class

class memberi elemen satu nama atau lebih yang dipakai CSS dan JavaScript untuk menemukannya. Beberapa elemen bisa memakai class yang sama, dan satu elemen bisa punya beberapa class, dipisahkan spasi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Setiap class tambahan menumpuk aturannya di atas yang sebelumnya. Di CSS, class dipilih dengan titik (.card); di JavaScript, element.classList.add('featured') dan classList.remove mengubahnya. Class adalah cara biasa untuk memberi gaya: sebagian besar CSS-mu akan menargetkan class.

Atribut id

id memberi elemen sebuah nama yang harus unik di satu halaman. Pakai id saat kamu butuh tepat satu elemen: target link, <label for>, atau document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Mengklik label akan memfokuskan input, karena for="email" menunjuk ke id="email". Link menggulir ke #pricing karena fragment di href cocok dengan id-nya.

	`class`	`id`
Berapa banyak elemen yang bisa memakainya	Berapa pun	Satu (unik)
Nilai per elemen	Beberapa, dipisahkan spasi	Satu
Selector CSS	`.name`	`#name`
Penggunaan umum	Memberi gaya pada sekelompok elemen	Target link, label, satu elemen tertentu di JavaScript

Sebuah id tidak boleh mengandung spasi. Awali dengan huruf supaya mudah dipakai di CSS: #2col bukan selector CSS yang valid tanpa escape.

Atribut global

Atribut-atribut ini berlaku di elemen mana pun:

Atribut	Fungsinya
`id`	Nama unik untuk elemen
`class`	Daftar nama class, dipisahkan spasi
`style`	CSS inline, seperti `style="color: red"`
`title`	Teks tooltip yang muncul saat kursor di atasnya
`lang`	Bahasa kontennya, seperti `lang="fr"`
`dir`	Arah teks: `ltr`, `rtl` atau `auto`
`hidden`	Menyembunyikan elemen (boolean)
`tabindex`	Membuat elemen bisa difokus dengan Tab, atau mengatur urutannya
`contenteditable`	Membuat pengguna bisa mengedit teks elemen
`data-*`	Data milikmu sendiri, dibaca dengan JavaScript

Atribut lang punya halamannya sendiri karena berpengaruh pada screen reader, terjemahan, dan mesin pencari.

Atribut data-*

Saat kamu perlu menyimpan nilai sendiri di sebuah elemen, awali namanya dengan data-. Nama apa pun boleh dipakai setelah awalan itu, dan JavaScript membaca nilainya lewat element.dataset, dengan tanda hubung diubah menjadi camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id menjadi dataset.productId. Nilainya selalu kembali sebagai string, jadi ubah dengan Number() sebelum melakukan perhitungan. CSS juga bisa memilih berdasarkan atribut ini: [data-price="4.50"].

Kesalahan umum

Menulis class dua kali. <div class="a" class="b"> hanya menyimpan a. Tulis keduanya di satu atribut: class="a b".
Memakai ulang sebuah id. Dua elemen dengan id yang sama merusak #links, label, dan getElementById, yang hanya mengembalikan elemen pertama. Pakai class untuk apa pun yang berulang.
disabled="false" atau checked="false". Atributnya masih ada, jadi masih aktif. Hapus atributnya.
Nilai tanpa tanda kutip yang mengandung spasi. alt=My photo mengatur alt menjadi My. Beri tanda kutip pada setiap nilai.
Membuat atribut sendiri tanpa data-. <div price="4"> adalah HTML yang tidak valid dan bisa bentrok dengan atribut standar di masa depan. Pakai data-price.

Pertanyaan yang sering diajukan

Apa itu atribut HTML?

Atribut HTML adalah informasi tambahan yang ditulis di dalam tag pembuka sebagai name="value". Atribut mengatur elemennya: href menentukan ke mana link mengarah, src dan alt menjelaskan gambar, class dan id membuat CSS dan JavaScript bisa menemukan elemen itu.

Apa perbedaan class dan id di HTML?

Sebuah id harus unik di satu halaman dan menandai satu elemen, untuk link #fragment, <label for> dan getElementById. Sebuah class bisa dipakai bersama oleh banyak elemen, dan satu elemen bisa punya beberapa class yang dipisahkan spasi. Pakai class untuk styling.

Bagaimana cara menambahkan beberapa class ke satu elemen HTML?

Tulis semuanya di satu atribut class, dipisahkan spasi: <div class="card featured dark">. Menulis class dua kali tidak berhasil: browser hanya menyimpan yang pertama.

Apakah nilai atribut HTML harus pakai tanda kutip?

Tanda kutip boleh dihilangkan kalau nilainya tidak mengandung spasi atau karakter khusus, tapi selalu memakai tanda kutip adalah kebiasaan yang aman. class=big box memberi elemen class big ditambah atribut terpisah bernama box.

Kenapa tombolku masih nonaktif dengan disabled="false"?

disabled adalah atribut boolean: keberadaannya berarti true, apa pun nilainya. Untuk mengaktifkan elemen, hapus atributnya, atau atur button.disabled = false di JavaScript, yang akan menghapusnya.

Bolehkah aku membuat atribut HTML sendiri?

Pakai awalan data-: data-price="12" atau data-user-id="7" valid di elemen mana pun dan bisa dibaca di JavaScript lewat element.dataset. Nama buatan sendiri tanpa awalan itu tidak valid di HTML.

Konsep terkait