Elemen telah menyediakan struktur, tetapi sering kali kita perlu melampirkan informasi tambahan: ke mana sebuah tautan menuju, dari mana sebuah gambar diambil, atau bagaimana sebuah kolom form berperilaku. Informasi tambahan tersebut ditulis sebagai atribut. Chapter ini membahas bentuk, posisi, dan jenis atribut yang perlu dikenali sejak awal.

Bentuk name=“value” #

Atribut ditulis pada tag pembuka dalam pola name="value": nama atribut, tanda sama dengan, lalu nilai yang dibungkus tanda kutip. Contoh pada elemen tautan:

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

Mari kita telaah baris di atas:

  1. Baris 1 (<a ...>): tag pembuka elemen tautan (anchor).
  2. Baris 1 (href): nama atribut yang menentukan alamat tujuan tautan.
  3. Baris 1 ("https://example.com"): nilai atribut — alamat halaman tujuan.
  4. Baris 1 (Kunjungi situs example.com): teks tautan yang tampil di layar dan dapat diklik pengguna.

Di browser, teks tautan tampil dengan gaya khas tautan (umumnya berwarna dan bergaris bawah). Ketika teks tersebut diklik, browser membuka alamat yang tercantum pada nilai href.

Atribut Hanya di Tag Pembuka #

Atribut selalu ditulis di dalam tag pembuka, tidak pernah di tag penutup. Kesalahan penempatan berikut cukup sering terjadi:

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

Bentuk yang benar menempatkan seluruh atribut pada tag pembuka:

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

Konvensi Kutip Ganda #

Nilai atribut dibungkus tanda kutip agar pembacaan oleh parser tidak ambigu. Materi Course ini memakai kutip ganda ("...") sebagai konvensi penulisan. Standar HTML juga menerima kutip tunggal dan nilai tanpa kutip, tetapi kutip ganda paling aman dipakai — terutama saat nilai memuat spasi:

html 
<img src="logo.png" alt="Logo toko kopi Budi">

Nilai alt pada contoh di atas memuat spasi; tanpa tanda kutip, parser akan membaca potongan setelah spasi sebagai atribut baru.

Atribut Boolean #

Atribut boolean adalah atribut yang cukup dituliskan namanya saja; kehadiran atribut sudah menyatakan kondisi aktif. Dua contoh yang sering dipakai: required (isian wajib diisi) dan disabled (elemen tidak aktif).

html 
<form>
  <label for="nama">Nama lengkap</label>
  <input type="text" id="nama" required>
  <button type="submit">Kirim</button>
</form>

Mari kita telaah kode di atas:

  1. Baris 2 (<label ...>): label untuk kolom isian; atribut for="nama" menghubungkan label dengan elemen yang memiliki id="nama".
  2. Baris 3 (<input ...>): kolom isian bertipe teks dengan atribut boolean required yang ditulis tanpa nilai.
  3. Baris 4 (<button ...>): tombol untuk mengirim form.

Efek atribut required: saat tombol Kirim ditekan dalam keadaan kolom nama kosong, browser menampilkan peringatan dan menolak mengirim form. Contoh atribut disabled:

html 
<button type="button" disabled>Tombol tidak aktif</button>

Tombol tersebut tampil redup dan tidak dapat diklik. Buktikan sendiri pada demo berikut — satu tombol memakai atribut boolean disabled, satu tidak. Tekan keduanya bergantian dan lihat penghitung di sebelahnya:

Atribut disabled ditulis tanpa nilai — cukup namanya saja, dan kehadirannya langsung mengubah perilaku elemen: tombol kedua menolak klik sama sekali.

Contoh: Gambar dengan src dan alt #

Dua atribut paling sering dipakai pada gambar adalah src dan alt:

html 
<img src="logo.png" alt="Logo toko kopi Budi">

Mari kita telaah baris di atas:

  1. Baris 1 (src="logo.png"): alamat file gambar yang akan dimuat browser.
  2. Baris 1 (alt="Logo toko kopi Budi"): teks pengganti yang tampil bila gambar gagal dimuat; teks yang sama dibacakan pembaca layar (screen reader).
  3. Baris 1 (tanpa tag penutup): <img> termasuk void element — tidak memiliki isi sehingga tidak ditutup.

Ringkasan #

  • Atribut ditulis pada tag pembuka dalam pola name="value".
  • Kutip ganda adalah konvensi penulisan nilai atribut.
  • Atribut boolean cukup dituliskan namanya, contohnya required dan disabled.
  • Elemen <img> memakai src untuk sumber gambar dan alt untuk teks pengganti.

Semua bahan telah tersedia: elemen, atribut, dan struktur dokumen. Chapter berikutnya merangkai semuanya menjadi halaman HTML pertama.