Sebenarnya kamu sudah ketemu atribut sejak awal section ini — href di tautan, src dan alt di gambar, type di input, sampai colspan di sel tabel. Nah, sekarang waktunya kita kumpulkan semuanya dan bahas atribut secara utuh. Konsepnya sederhana, tapi perannya besar — dan dua di antaranya, id dan class, adalah jembatan yang menghubungkan HTML dengan CSS dan JavaScript.
Ini bagian penutup dari dasar-dasar HTML. Setelah baca artikel ini, kamu bakal ngerti atribut itu apa, aturan main menulisnya, dan beberapa atribut “global” yang nyaris selalu kamu pakai di setiap elemen.
Atribut itu apa
Atribut adalah informasi tambahan yang kamu lekatkan ke sebuah elemen, dan ditulis di dalam tag pembukanya. Pola dasarnya selalu nama="nilai":
<a href="https://acy-partner.com">Sebuah tautan</a>
<img src="kucing.jpg" alt="Seekor kucing" />
<input type="email" />Di setiap contoh tadi, atributnya ada di tag pembuka dan memberi elemen detail yang dia butuhkan: tautan ini mengarah ke mana, gambar mana yang ditampilkan, dan input-nya bertipe apa. Satu elemen juga boleh punya beberapa atribut sekaligus, tinggal pisahkan dengan spasi:
<img src="kucing.jpg" alt="Seekor kucing" width="400" height="300" />Ada beberapa aturan yang perlu kamu pegang:
- Atribut hanya ditulis di tag pembuka, tidak pernah di tag penutup.
- Nilainya dibungkus tanda kutip (
"..."). Kutip tunggal sebenarnya boleh, tapi pakai kutip ganda saja biar konsisten. - Kalau atributnya lebih dari satu, pisahkan dengan spasi.
- Urutannya bebas — mau
srcdulu barualt, atau sebaliknya, dua-duanya sah.
Sebagian atribut tidak butuh nilai
Ada juga atribut yang fungsinya cuma seperti saklar nyala/mati dan tidak butuh nilai — cukup ditulis, itu sudah cukup. Contohnya required pada input form yang artinya “kolom ini wajib diisi,” atau disabled yang artinya “kontrol ini dinonaktifkan.” Cukup tulis satu kata saja: <input type="text" required />. Atribut seperti ini disebut atribut boolean — required-nya itu ada, atau tidak ada sama sekali, tidak ada nilai di antaranya.
Atribut global: bisa dipakai di elemen mana pun
Kebanyakan atribut hanya cocok untuk elemen tertentu — href cuma masuk akal di tautan, src cuma dipakai elemen yang memuat berkas. Tapi ada satu kelompok spesial bernama atribut global yang bisa dipasang di elemen apa pun. Dua di antaranya bahkan sangat penting, sampai-sampai kamu akan terus memakainya.
Atribut id
Atribut id memberi sebuah elemen nama yang unik di dalam halaman:
<h2 id="harga">Harga Kami</h2>Kuncinya ada di kata unik — satu id idealnya hanya muncul sekali dalam satu halaman, dan tidak boleh ada dua elemen yang memakai id sama. Anggap saja id itu seperti tanda pengenal khusus untuk satu elemen saja. Salah satu kegunaannya sudah pernah kamu lihat: meloncat ke titik tertentu di halaman lewat <a href="#harga">. Selain itu, id juga jadi cara JavaScript menemukan satu elemen spesifik yang mau diolah, sekaligus cara label menyambung ke input (nilai for="..." dicocokkan dengan id tadi).
Atribut class
Atribut class juga memberi label ke elemen, tapi bedanya dengan id, satu class boleh dipakai bersama oleh banyak elemen, dan satu elemen pun boleh punya lebih dari satu class:
<p class="intro">Paragraf pertama.</p>
<p class="intro highlight">Paragraf lain dengan dua class.</p>Class inilah cara utama kamu menyambungkan HTML ke CSS. Caranya, beri beberapa elemen class yang sama, lalu tulis satu aturan CSS, dan otomatis semua elemen ber-class itu tertata sekaligus. Kalau id itu berarti “elemen yang satu ini,” maka class berarti “sekelompok elemen yang ingin kamu buat tampil atau berperilaku sama.”
id itu satu, class itu banyak
Cara termudah mengingat bedanya begini: id itu unik — satu elemen, satu halaman, mirip nomor KTP yang cuma dimiliki satu orang. Sedangkan class itu bersama — semacam kategori yang bisa dimiliki banyak elemen, mirip jabatan yang bisa disandang banyak orang sekaligus. Pakai id kalau kamu mau menunjuk persis satu hal, dan pakai class kalau kamu mau mengelompokkan beberapa hal. Dalam praktik styling sehari-hari, kamu bakal jauh lebih sering pegang class ketimbang id.
Bagaimana id dan class menghubungkan ketiga lapisan
Nah, di sinilah semuanya nyambung. Ingat lagi tiga lapisan tadi: HTML untuk struktur, CSS untuk tampilan, JavaScript untuk perilaku. Atribut id dan class inilah yang dipakai dua lapisan lain untuk menemukan bagian HTML yang mau mereka olah.
Coba lihat potongan HTML ini:
<button id="tombol-beli" class="primary">Beli sekarang</button>- CSS bisa menargetkan class-nya untuk menata tampilan: “buat semua elemen ber-class
primaryjadi hijau dengan sudut membulat.” - JavaScript bisa menargetkan id-nya untuk menambah perilaku: “kalau elemen ber-id
tombol-belidiklik, masukkan barang ke keranjang.”
Jadi kedua atribut ini ibarat pegangan yang dijadikan tumpuan oleh dua bahasa lain. Kamu belum perlu paham CSS atau JavaScript dulu untuk menangkap intinya: id dan class adalah yang membuat HTML-mu punya alamat, sehingga bisa ditata dan dibuat interaktif nanti. Itulah kenapa keduanya bertebaran di banyak elemen pada kode-kode di dunia nyata.
Atribut global berguna lainnya
Ada beberapa atribut global lain yang bagus untuk kamu kenali sejak dini:
titlememunculkan tooltip kecil saat pengguna mengarahkan kursor ke elemennya:
<abbr title="HyperText Markup Language">HTML</abbr>stylememungkinkan kamu menempelkan CSS langsung ke satu elemen. Enak buat coba-coba cepat, tapi di proyek serius kamu sebaiknya menaruh style-nya di berkas CSS terpisah, bukan ditulis inline begini:
<p style="color: blue;">Teks ini biru.</p>langmenyatakan bahasa dari isi sebuah elemen (kamu sudah melihatnya di<html>, tapilangbisa dipasang di elemen mana pun kalau ada bagian halaman yang ditulis dalam bahasa berbeda).- Atribut
data-*memungkinkan kamu menyelipkan data buatanmu sendiri ke sebuah elemen agar bisa dipakai JavaScript nanti, misalnyadata-user-id="42". Sebagai pemula kamu belum butuh ini, tapi lumayan untuk tahu bahwa ada yang namanya begini.
Menulis atribut dengan rapi
Ada beberapa kebiasaan yang bikin HTML-mu tetap rapi:
- Selalu beri tanda kutip pada nilai atribut.
class="intro"sudah benar; kalau kutipnya dilepas, bisa muncul bug yang susah dilacak. - Buat nama
iddanclassyang bermakna.class="intro"atauclass="card"langsung memberi tahu elemen itu apa, sementaraclass="x1"tidak menjelaskan apa-apa. - Jangan pakai ulang
idyang sama di satu halaman. Kalau kamu memang butuh label yang sama di beberapa elemen, di situlahclassberperan.
Penutup — dan akhir dari dasar-dasar HTML
Atribut adalah konsep inti terakhir di HTML, dan sekarang kamu sudah pegang semuanya:
- Sebuah atribut menambahkan informasi ke elemen, ditulis dengan pola
nama="nilai"di dalam tag pembuka. - Sebagian atribut bersifat boolean (seperti
required) — cukup keberadaannya, itu sudah jadi nilainya. - Atribut global bisa dipasang di elemen mana pun; dua yang paling penting adalah
id(nama unik, dipakai sekali) danclass(label bersama, dipakai banyak elemen). iddanclassadalah jembatannya — keduanya yang memungkinkan CSS menata HTML-mu dan JavaScript menambah perilaku, sebab keduanya membuat elemenmu punya alamat.- Atribut global berguna lainnya antara lain
title,style,lang, dandata-*.
Dan itu dia, dasar-dasar HTML dari awal sampai tuntas. Sepanjang section ini kamu sudah melangkah dari “apa itu HTML”, menata sebuah dokumen, menulis teks, menambah tautan dan gambar, membangun form dan tabel, memakai elemen semantik, sampai akhirnya merangkai semuanya dengan atribut. Sekarang kamu sudah bisa membangun halaman web yang utuh, tersusun rapi, dan mudah diakses — sebuah fondasi yang benar-benar kokoh.
Dari titik ini, langkah selanjutnya yang paling pas adalah CSS — lapisan yang mengambil HTML polos tapi fungsional yang sudah bisa kamu tulis, lalu membuatnya tampil persis seperti yang kamu mau. Di situlah halamanmu naik kelas dari sekadar berfungsi menjadi enak dipandang.
