Chapter Mengenal Atribut HTML pada Section Pengenalan telah memperkenalkan bentuk name="value" sebagai cara melampirkan informasi pada elemen. Sekarang kita naik satu tingkat: membedah aturan penulisan yang menentukan atribut terbaca benar oleh parser — dari pemisah antar atribut, pilihan tanda kutip, sampai perilaku parser saat menemui atribut yang ditulis dua kali.
Satu aturan yang tidak berubah: atribut selalu ditulis pada tag pembuka, tidak pernah pada tag penutup.
Menulis Banyak Atribut #
Satu tag pembuka boleh memuat seberapa banyak atribut yang dibutuhkan elemennya. Atribut dipisahkan spasi dan urutannya bebas — pertukaran posisi tidak mengubah makna.
<img src="logo.png" alt="Logo toko kopi Budi" width="200" height="150">Hasil Render: gambar tampil berukuran 200 × 150 piksel; bila file logo.png gagal dimuat, teks “Logo toko kopi Budi” tampil sebagai penggantinya.
Pada demo, berkas gambar lokal diganti placeholder SVG agar langsung terlihat; struktur markupnya sama persis.
Mari kita telaah baris di atas:
- Baris 1 (
src="logo.png"): alamat file gambar yang dimuat browser. - Baris 1 (
alt="Logo toko kopi Budi"): teks pengganti bila gambar tidak tersedia. - Baris 1 (
width="200"danheight="150"): ukuran tampilan gambar dalam piksel. - Baris 1 (spasi antar atribut): spasi berperan sebagai pemisah; tanpa spasi, dua atribut akan terbaca menyatu dan menjadi galat.
Contoh pada tautan dengan dua atribut:
<a href="https://example.com" title="Buka situs contoh">example.com</a>Atribut href menentukan tujuan tautan; atribut title menambahkan tooltip saat pointer berhenti di atas tautan — tooltip dibahas tuntas pada chapter atribut title.
Kutip Tunggal dan Kutip Ganda #
Standar HTML menerima kutip tunggal ('...') dan kutip ganda ("...") untuk membungkus nilai. Konvensi Course ini — sekaligus kebiasaan umum industri — memakai kutip ganda. Alasannya: nilai yang memuat tanda kutip tunggal tetap aman di dalam pembungkus kutip ganda, sedangkan sebaliknya kita harus berganti pembungkus.
Meskipun HTML juga mengizinkan nilai tanpa kutip, bentuk tersebut rawan salah baca begitu nilai memuat spasi. Selalu beri kutip pada setiap nilai.
Atribut Tanpa Nilai #
Sebagian atribut cukup dituliskan namanya tanpa nilai sama sekali:
<input type="text" required>Atribut seperti ini disebut atribut boolean: kehadirannya sudah menyatakan kondisi aktif. Pada contoh di atas, required membuat kolom wajib diisi sebelum form dikirim. Aturan lengkapnya — termasuk satu jebakan klasiknya — dibahas pada chapter Boolean Attributes.
Atribut Ganda: yang Pertama Menang #
Parser membaca atribut satu per satu dari kiri. Bila satu tag memuat nama atribut yang sama lebih dari satu kali, parser membuang kemunculan berikutnya dan hanya mempertahankan yang pertama.
<a href="https://example.com" href="https://example.org">Situs contoh</a>Kode di atas tetap diproses, tetapi tautan menuju https://example.com; atribut href kedua dibuang begitu saja. Perilaku ini membuat galat duplikat sulit terasa — halaman terbuka normal, hanya tujuannya tidak sesuai harapan. Bentuk yang benar cukup satu:
<a href="https://example.com">Situs contoh</a>Atribut di Tag Penutup #
Penulisan atribut pada tag penutup melanggar sintaks HTML:
<p>Budi menjual kopi.</p lang="id">Parser menolak atribut pada tag penutup dan memperlakukannya sebagai token galat yang diabaikan. Pindahkan atribut ke tag pembuka:
<p lang="id">Budi menjual kopi.</p>Ringkasan #
- Atribut ditulis pada tag pembuka, dipisah spasi, dengan urutan bebas.
- Kutip ganda adalah konvensi; kutip tunggal sah, nilai tanpa kutip rawan galat.
- Atribut boolean ditulis tanpa nilai.
- Atribut bernama sama dua kali: parser memakai yang pertama dan membuang sisanya.
- Atribut pada tag penutup melanggar sintaks dan diabaikan parser.
Chapter berikutnya membahas kelompok atribut yang sah dipakai pada semua elemen: global attributes.