Bab 06: Mengenal Atribut HTML
Pernah nanya seperti ini?
- “Kenapa tombolku nggak warna-warni?”, “Kenapa gambarku nggak muncul?”, atau “Kenapa Google nggak ngerti konten web-ku?”
Jawabannya? Bisa jadi karena kamu belum ngobrol sama atribut HTML.
Kalau tag HTML itu tubuh, atribut itu jiwanya. Mereka yang kasih arahan:
- “Ini link-nya tujuan ke mana?”
- “Gambar ini ukurannya berapa?”
- “Kalau gambar gagal, tulis apa sebagai cadangan?”
Tanpa atribut, HTML cuma kumpulan teks kosong yang bingung mau ngapain. Siap bikin web mu lebih smart, accessible, dan SEO-friendly? Yuk, gas!
Apa Itu Atribut HTML & Kenapa Penting?
Atribut itu pasangan tag HTML yang kasih detail tambahan.
Bayangin begini:
<img>Itu cuma bilang: “Ada gambar di sini!”
Tapi gak bilang: gambar apa? Di mana? Ukurannya berapa?
Nah, masukin atribut:
<img src="kucing-lucu.jpg" alt="Kucing tidur miring" width="300">Sekarang browser tahu apa, bagaimana, dan kenapa.
Tanpa atribut, web-mu kayak restoran tanpa menu: ada meja, ada kursi, tapi pelanggan bingung mau pesan apa.
Cara Nulis Atribut yang Bener
Atribut selalu ditulis di dalam start tag, dan formatnya:nama="nilai"
Contoh bener:
<a href="https://example.com">Klik sini!</a>Contoh salah (jangan tiru!):
<a> href="..." <!-- salah: atribut di luar tag -->
<a href=https://example.com> <!-- bisa jalan, tapi rawan error -->Ingat: nama atribut = string, nilai = string dalam tanda petik.
Bikin Link Klikable dengan href
href (hypertext reference) itu atribut wajib buat <a> biar jadi link beneran.
<a href="https://www.google.com">Cari tahu segalanya</a>Tanpa href, itu cuma teks biasa yang pura-pura jadi link.
Browser: “Yha elah, cuma gaya doang.”
Tips:
- Pakai URL lengkap (
https://...) buat link luar.- Pakai path relatif (
/tentang.html) buat halaman dalam situsmu.
Tampilkan Gambar dengan src
<img> gak akan tampil apa-apa tanpa atribut src.
<img src="logo.png">src = “source” = sumber gambar.
Kalau file-nya nggak ketemu? Browser cuma tampilin ikon gambar rusak. Sedih.
Pastikan path-nya benar:
images/foto.jpg→ folderimagesdi dalam folder proyek/assets/logo.svg→ dari root website
Atur Ukuran Gambar: width & height
Biarkan gambar ngatur layout sendiri? Siap-siap halaman loncat-loncat pas loading.
Solusi: kasih width dan height:
<img src="banner.jpg" width="800" height="200" alt="Banner promo">Catatan: nilai dalam pixel, tanpa satuan (
pxnggak dipakai di sini).
Manfaatnya:
- Halaman nggak “joged” pas gambar muncul
- SEO lebih suka (Google nilai UX bagus)
Jangan Lupa alt Hero untuk Aksesibilitas!
alt itu teks pengganti kalau gambar gagal muncul — atau buat pembaca layar (screen reader).
<img src="grafik-penjualan.png" alt="Grafik penjualan naik 40% Q1 2025">Tanpa alt:
- Pengguna tunanetra: “Hmm… ada apa di sini?”
- SEO: “Ini gambar apa? Gak ngerti.”
- Kamu: “Waduh, kontenku nggak ramah semua orang.”
Best practice:
- Jangan kosong (
alt="") kecuali gambar dekoratif- Jangan tulis
alt="gambar"— terlalu umum!
Warna Dadakan dengan style
Mau ubah warna, font, atau margin langsung di tag? Pakai style!
<p style="color: blue; font-size: 18px;">Ini paragraf biru!</p>Tapi jangan kebanyakan! style bagus buat perbaikan cepat, tapi untuk proyek besar, lebih baik pakai file CSS terpisah. Atribut style sudah pernah aku bahas sendiri, khusus 1 halaman.
Ingat: prioritas aksesibilitas > tampilan keren. Jangan pake warna yang susah dibaca!
Tentukan Bahasa Halaman: lang
Browser & mesin pencari perlu tahu bahasa kontenmu. Bantu mereka dengan lang di <html>:
<html lang="id">Untuk Bahasa Indonesia → lang="id"
Inggris → lang="en"
Manfaatnya:
- Google tahu ini konten lokal → bisa bantu SEO
- Screen reader baca pakai aksen yang tepat
- Terjemahan otomatis lebih akurat
Tooltip Keren pakai title
Mau kasih info rahasia saat user hover mouse? Pakai title!
<p title="Ini rahasia penting!">Arahkan mouse ke sini...</p>Muncul tooltip kecil.
Bisa dipakai di link, gambar, bahkan tombol.
Tapi jangan jadi tempat nyimpan info penting — karena:
- Nggak muncul di mobile (touch device)
- Nggak terbaca oleh screen reader secara default
Kenapa Pakai Huruf Kecil?
Dulu, HTML gak peduli: HREF, href, HrEf — sama aja.
Tapi sekarang, standar modern (HTML5) menganjurkan huruf kecil semua.
<!-- ✅ Rekomendasi -->
<a href="..." class="btn" id="home">Home</a>
<!-- ❌ Hindari -->
<A HREF="..." CLASS="btn">Home</A>Alasannya:
- Lebih konsisten
- Cocok dengan CSS & JavaScript (yang case-sensitive!)
- Nggak bikin mata pegel waktu baca kode
Kapan Harus Pakai Tanda Petik?
Selalu pakai tanda petik untuk nilai atribut kecuali kalau nilainya satu kata tanpa spasi & simbol (tapi tetap disarankan pakai petik biar aman).
<!-- Aman -->
<img src="foto.jpg" alt="Matahari terbit">
<input type="text" name="email">
<!-- Bisa error -->
<img src=foto.jpg alt=Matahari terbit> <!-- "terbit" dianggap atribut baru! -->Jadi, pakai tanda petik. Titik.
Double vs Single Quote Bedanya Apa?
Keduanya sama valid:
<a href="https://example.com">Double</a>
<a href='https://example.com'>Single</a>Tapi pilih salah satu, jangan campur dalam satu proyek.
Trik:
Kalau nilainya mengandung tanda kutip, ganti jenis kutip nya:HTML<p title='Dia bilang, "Halo!"'>...</p> <!-- Atau --> <p title="Dia bilang, 'Halo!'">...</p>
Atribut Global: Superpower Buat Semua Elemen
Atribut global bisa dipakai di semua tag HTML. Yang paling sering dipakai:
class→ buat kelompokkan elemen (misal:class="btn-primary")id→ identitas unik (misal:id="header")data-*→ simpan data kustom (misal:data-user-id="123")style,title,lang→ sudah dibahas di atas
Contoh kombinasi:
<button class="btn" id="submit-btn" data-action="save" title="Simpan data">
Simpan
</button>Atribut global = fleksibilitas + kontrol penuh.
Sekilas Atribut Event (Bonus Interaktif!)
Kalau kamu pengen bikin halaman lebih “hidup”, ada atribut seperti:
onclick→ saat diklikonmouseover→ saat mouse di atasonload→ saat halaman selesai dimuat
Contoh:
<button onclick="alert('Halo, Bos!')">Klik aku</button>Tapi!
Untuk proyek serius, hindari inline event. Lebih baik pakai JavaScript eksternal biar kode rapi & mudah di-maintain.
Ringkasan Kilat
- Atribut = detail tambahan di dalam tag
- Format:
nama="nilai"→ selalu di start tag href,src,alt,width,height→ wajib tahu!altitu wajib buat aksesibilitaslangbantu SEO & user global- Pakai huruf kecil + tanda petik → kode lebih bersih
- Atribut global (
class,id,data-*) = senjata rahasia - Jangan lupa: konsistensi > kecepatan ngetik
Referensi Resmi
Mau daftar lengkap semua atribut HTML?
Cek langsung ke sumber tepercaya:
W3Schools – HTML Attributes
Sekarang kamu udah pegang kunci rahasia HTML yang bikin web nggak cuma jalan, tapi juga ramah, rapi, dan responsif.
Atribut itu kayak bumbu dapur: dikit aja, tapi bikin masakan (baca: website) jadi nendang!
Kalau kamu lanjut ke CSS atau JavaScript, atribut seperti class, id, dan data-* bakal jadi bestie mu seumur hidup.
Jangan lupa web yang bagus bukan yang paling keren, tapi yang paling bisa dipakai oleh semua orang.
Bisa kesini kalau kamu mau cek daftar isi Belajar HTML untuk Pemula yang lengkap