Belajar HTML Part 6: Atribut HTML (Global, Event, dan Khusus Elemen)

by

Pada Part 5, kamu sudah mempelajari tabel dan form HTML yang sering digunakan untuk menampilkan data dan interaksi user. Sekarang di Part 6, kita akan membahas salah satu fondasi penting HTML, yaitu atribut HTML.

Tanpa memahami atribut HTML:

  • Elemen HTML tidak bisa dimaksimalkan
  • Interaksi user terbatas
  • Integrasi CSS dan JavaScript jadi sulit

Apa Itu Atribut HTML?

Atribut HTML adalah informasi tambahan yang diberikan pada elemen HTML untuk mengatur perilaku, tampilan, atau data tertentu.

Atribut selalu ditulis di dalam tag pembuka dan biasanya berbentuk: 

<tag atribut="nilai">Konten</tag>

Contoh sederhana: 

<a href="https://example.com">Kunjungi Website</a>

Kategori Atribut HTML

Secara umum, atribut HTML dibagi menjadi 3 kategori utama:

  • Atribut Global
  • Atribut Event
  • Atribut Khusus Elemen

Kita bahas satu per satu 👇

Atribut HTML Global

Atribut global adalah atribut yang bisa digunakan pada hampir semua elemen HTML.

class

<style>
.text-highlight {background-color: yellow; /* Warna highlight */}
</style>

<p>Lihat <span class="text-highlight">Teks ini punya class</span> menggunakan HTML dan CSS</p>

Digunakan untuk:

  • Styling CSS
  • Target JavaScript

id

<div id="header"></div>

Catatan penting:

  • id harus unik
  • Satu halaman satu id

style

<p style="color:red;">Teks merah</p>

Tidak direkomendasikan untuk project besar, lebih baik gunakan CSS eksternal.

title

<button title="Klik untuk kirim">Kirim</button>

Akan muncul tooltip saat hover.

hidden

<p hidden>Teks ini disembunyikan</p>

data-*

Digunakan untuk menyimpan data custom. 

<div data-id="123" data-role="admin"></div>

Atribut ini sangat sering dipakai bersama JavaScript.

Atribut Event HTML

Atribut event digunakan untuk menangani aksi pengguna.

onclick

<button onclick="alert('Halo')">Klik Saya</button>

onchange

<input type="text" onchange="console.log(this.value), showText.innerText=(this.value) ">

<p id="showText"></p>

onmouseover

<p onmouseover="this.style.color='blue'">Arahkan mouse</p>

Catatan:

  • Boleh dipakai untuk belajar
  • Untuk production, disarankan pakai JavaScript terpisah

Atribut Khusus Elemen

Atribut jenis ini hanya berlaku untuk elemen tertentu.

Atribut pada a

<a href="https://example.com" target="_blank" rel="noopener">Link</a>

<!-- Info: Click "Run Tab Browser" agar link bisa di akses -->

Atribut penting:

  • href
  • target
  • rel

Atribut pada img

<img src="example/gambar.jpg" alt="Contoh gambar" width="300">

Alt adalah atribut WAJIB untuk SEO dan aksesibilitas.

Atribut pada input

<input type="text" name="username" placeholder="Masukkan username" required>

Atribut penting:

  • type
  • name
  • placeholder
  • required

Best Practice Penggunaan Atribut HTML

  • Gunakan atribut seperlunya
  • Utamakan semantik
  • Hindari inline event untuk project besar
  • Gunakan data-* untuk integrasi JS

Dokumentasi Lengkap Atribut HTML

Untuk daftar atribut HTML dari A sampai Z beserta penjelasan detail, silakan baca dokumentasi lengkap di:

Dokumentasi Atribut HTML Lengkap

Artikel tersebut menjadi referensi utama yang melengkapi pembahasan Part 6 ini.

Ringkasan Part 6

  • Atribut memberi kontrol penuh pada elemen HTML
  • Atribut global bisa dipakai hampir di semua elemen
  • Atribut event menangani interaksi user
  • Atribut khusus elemen wajib dipahami per kasus

Lanjutan Materi

Di Part 7, kita akan membahas:

  • Semantic HTML
  • header, nav, main, section, article
  • HTML modern yang SEO-friendly

Sebelumnya: Part 5 Table & Form HTML | Lanjut: Part 7 Semantic HTML

Leave a Comment