Background Image

Postingan

Atribut HTML: ID, Class, dan Atribut Global Lainnya

Atribut HTML seperti id, class, dan atribut global lainnya digunakan untuk mengatur identitas, gaya, dan perilaku elemen dalam halaman web.

Gambar Atribut HTML: ID, Class, dan Atribut Global Lainnya
30 Juli 2025 10:53 Dinda Sintia HTML

Atribut HTML: ID, Class, dan Atribut Global Lainnya

Dalam pengembangan web, atribut HTML memainkan peran penting dalam memberikan informasi tambahan pada elemen dan memungkinkan pengembang mengontrol tampilan dan perilaku elemen tersebut. Dua atribut yang paling umum digunakan adalah id dan class, disertai atribut global lainnya yang mendukung fungsionalitas halaman web secara menyeluruh.

1. Atribut id

Atribut id digunakan untuk memberikan identitas unik pada sebuah elemen HTML. Setiap elemen hanya boleh memiliki satu id, dan nilai id tidak boleh digunakan lebih dari satu kali dalam satu halaman.

<p id="paragraf1">Ini adalah paragraf pertama.</p>

Fungsi utama id:

  • Menjadi target untuk CSS styling
  • Digunakan dalam JavaScript untuk memanipulasi elemen
  • Sebagai target tautan internal dengan #id

2. Atribut class

Atribut class digunakan untuk memberikan identitas kelompok pada satu atau lebih elemen. Berbeda dengan id, nilai class bisa digunakan berulang dan satu elemen dapat memiliki lebih dari satu kelas.

<p class="highlight">Paragraf penting.</p>

Fungsi class:

  • Mengelompokkan elemen untuk styling CSS bersama
  • Mempermudah manipulasi elemen dengan JavaScript secara massal

3. Atribut Global Lainnya

Selain id dan class, ada beberapa atribut global lain yang dapat diterapkan ke hampir semua elemen HTML:

  • title: Menampilkan tooltip saat kursor diarahkan.
  • <a href="#" title="Kunjungi halaman utama">Home</a>
  • style: Memberikan gaya langsung pada elemen.
  • <p style="color: red;">Teks berwarna merah.</p>
  • hidden: Menyembunyikan elemen dari tampilan.
  • <div hidden>Konten tersembunyi</div>
  • lang: Menentukan bahasa dari isi elemen.
  • <p lang="en">This is in English.</p>
  • tabindex: Mengatur urutan navigasi keyboard.
  • <input type="text" tabindex="1">
  • data-*: Menyimpan data kustom pada elemen, sering digunakan dalam JavaScript.
  • <div data-user-id="123">User Info</div>

Kesimpulan

Atribut HTML seperti id, class, dan atribut global lainnya memungkinkan pengembang web memberikan struktur, gaya, dan interaksi yang lebih dinamis pada halaman. Pemahaman dan penggunaan yang tepat terhadap atribut ini akan mempermudah dalam membangun antarmuka yang efisien dan terorganisir.

Postingan Terkait