Memahami Atribut

Elemen pada Chapter sebelumnya dapat membawa informasi tambahan yang mengubah makna maupun perilakunya: informasi itu bernama atribut. Atribut menentukan ke mana link menuju, gambar mana yang diunduh, dan teks apa yang muncul saat kursor melayang. Penulisan atribut terlihat sepele, tetapi ada aturan tanda kutip, spasi, dan nilai yang menentukan valid atau tidaknya markup. Pada Chapter ini kita membedah anatomi atribut, konvensi tanda kutip, atribut boolean, dan dua kesalahan yang paling sering dijumpai pemula.

Anatomi Atribut: Nama, Sama Dengan, dan Nilai #

Atribut selalu ditulis di dalam opening tag dan tidak pernah muncul pada closing tag. Bentuk paling umum terdiri atas tiga komponen: nama atribut, tanda sama dengan, dan nilai yang diapit tanda kutip ganda. Contoh paling representatif berasal dari elemen img (dibahas pada section Images dan Media) yang membutuhkan dua atribut:

<img src="soto.jpg" alt="Semangkuk soto ayam">

Tabel berikut membedah satu atribut src="soto.jpg" menjadi komponen-komponennya:

Spasi berperan sebagai pemisah antaratribut, dan urutan atribut bebas. <img src="soto.jpg" alt="Soto ayam"> memiliki makna yang sama persis dengan <img alt="Soto ayam" src="soto.jpg">. Banyak tim menetapkan urutan tertentu demi keterbacaan; yang penting konsisten.

Tanda Kutip Ganda sebagai Konvensi #

Standar HTML memperbolehkan empat cara penulisan atribut: tanpa nilai (atribut boolean), nilai tanpa kutip, nilai berkutip satu, dan nilai berkutip ganda. Konvensi hampir seluruh codebase adalah tanda kutip ganda, dan itulah yang kita pakai sepanjang Course. Kutip satu tetap sah dan berguna ketika nilai atribut memang mengandung karakter kutip ganda. Sementara itu, nilai tanpa kutip paling berisiko karena berhenti pada spasi pertama, sehingga sisanya terbaca sebagai atribut baru.

<p title='Komentar Budi: "Soto ini terbaik."'>Menu andalan.</p>

Atribut Boolean #

Sejumlah atribut tidak menyatakan nilai, melainkan status aktif-tidak aktif; kelompok ini disebut boolean attribute. Contoh yang paling sering kita temui: checked, disabled, dan required. Menurut standar HTML, kehadiran atribut boolean pada elemen menyatakan nilai true, sedangkan ketiadaannya menyatakan false. Bila nilai tetap ingin ditulis, nilai yang sah hanyalah string kosong atau nama atribut itu sendiri; untuk menyatakan false, atribut dihilangkan sama sekali.

<input type="checkbox" checked>
<input type="checkbox">

Baris pertama menampilkan kotak centang dalam keadaan terisi, sedangkan baris kedua kosong. Elemen input dibahas tuntas pada section Forms; di sini keduanya berperan sebagai demokan status boolean yang mudah diamati.

Dua Kesalahan yang Sering Terjadi #

Kesalahan pertama adalah lupa kutip penutup. Parser menelan teks berikutnya sebagai bagian dari nilai sampai bertemu tanda kutip berikutnya, sehingga atribut setelahnya terbaca sebagai potongan nilai, bukan atribut mandiri:

<img src="soto.jpg" alt="Semangkuk soto ayam width="120">

Kesalahan kedua adalah atribut duplikat pada satu tag. Menulis atribut dengan nama sama dua kali dalam satu opening tag merupakan parse error; parser memakai kemunculan pertama dan membuang sisanya:

<p title="Menu pertama" title="Menu kedua">Soto ayam.</p>

Browser menampilkan tooltip “Menu pertama” karena kemunculan pertama itulah yang dipertahankan.

Contoh Lengkap dalam Satu File #

File berikut merangkum anatomi atribut, atribut boolean, dan urutan bebas dalam satu dokumen. Simpan sebagai bermain-atribut.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bermain Atribut</title>
</head>
<body>
  <h1>Latihan atribut Siti</h1>
  <p title="Tooltip dari atribut title">Arahkan kursor ke paragraf ini.</p>
  <input type="text" value="Soto ayam" placeholder="Tulis menu" disabled>
  <input type="checkbox" checked>
  <input type="checkbox">
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Latihan atribut Siti"
  - Kotak teks berisi "Soto ayam" dalam keadaan redup dan tidak bisa diedit
  - Kotak centang pertama terisi, kotak centang kedua kosong
  - Tooltip "Tooltip dari atribut title" saat kursor melayang di atas paragraf

Mari kita telaah bagian-bagian penting pada file di atas:

1. Baris 2 (<html lang="id">): atribut dengan tanda kutip ganda pada opening tag elemen akar.
2. Baris 10 (<p title="...">): nilai memuat spasi sehingga wajib berkutip; kursor yang melayang menampilkan tooltip.
3. Baris 11 (<input ... disabled>): tiga atribut dalam satu tag dengan urutan bebas; disabled adalah atribut boolean sehingga ditulis tanpa nilai.
4. Baris 12 (<input type="checkbox" checked>): kehadiran checked menyatakan true; kotak tampil terisi.
5. Baris 13 (<input type="checkbox">): tanpa atribut boolean apa pun sehingga kotak tampil kosong.

Atribut yang kita bahas selama ini melekat pada elemen tertentu, sedangkan ada kelompok atribut yang dapat dipasang pada hampir semua elemen, mulai dari id dan class hingga hidden. Chapter berikutnya menelusuri kelompok tersebut yang dikenal sebagai global attributes.

Referensi resmi untuk pendalaman:

• WHATWG — HTML Living Standard: Attributes
• WHATWG — Boolean attributes
• MDN Web Docs — Sintaks dasar HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bermain Atribut</title>
</head>
<body>
  <h1>Latihan atribut Siti</h1>
  <p title="Tooltip dari atribut title">Arahkan kursor ke paragraf ini.</p>
  <input type="text" value="Soto ayam" placeholder="Tulis menu" disabled>
  <input type="checkbox" checked>
  <input type="checkbox">
</body>
</html>