Referensi Atribut HTML

Atribut mengatur perilaku elemen: href menentukan tujuan link, src menunjuk berkas media, dan type mengubah karakter kontrol isian. Jumlah atribut jauh melampaui jumlah elemen karena setiap elemen membawa set atributnya sendiri. Untungnya pola dokumentasinya rapi: satu halaman indeks atribut, satu halaman global attributes, dan halaman elemen yang memuat atribut spesifiknya. Chapter ini merapikan pola tersebut menjadi alur pencarian yang bisa kita jalankan begitu menjumpai atribut asing.

Indeks Atribut dan Global Attributes #

Halaman HTML attributes reference — beralamat di developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes — mendaftar atribut dalam tabel yang menyebut keterangan dan elemen pembawanya. Daftar ini cocok untuk situasi terbalik: nama atribut kita temukan lebih dulu, lalu kita cari di mana atribut itu sah dipakai. Berbeda dari itu, halaman Global attributes menghimpun atribut yang sah pada semua elemen, seperti class, id, lang, title, style, dan hidden.

Atribut Spesifik Ada di Halaman Elemen #

Tabel indeks tidak menjelaskan nilai dan perilaku rinci; tugas itu diberikan kepada halaman elemen pembawanya. Pola ini telah kita pakai sepanjang course: loading dibahas pada halaman img dan iframe, sandbox dibahas pada halaman iframe, sedangkan alt menyatu dengan pembahasan img. Alasannya sederhana: makna satu atribut dapat berbeda antarelemen, sehingga dokumentasinya memang menyatu dengan elemen tersebut.

Alur Menelusuri Atribut Asing #

Ketika membaca kode developer lain, lima langkah berikut memetakan atribut asing dengan cepat:

1. Identifikasi elemen pembawa atribut, misalnya iframe pada tag <iframe sandbox="allow-scripts">.
2. Buka halaman elemen tersebut di MDN, lalu cari bagian Attributes.
3. Baca baris atribut yang dicari: nilai yang sah, nilai default, dan catatan penting yang menyertainya.
4. Bila atribut tidak muncul di halaman elemen, periksa halaman Global attributes karena atribut itu mungkin berlaku umum.
5. Uji pemahaman dengan validator: atribut yang ditaruh pada elemen yang salah akan ditolak.

Contoh pertama: menjumpai loading="lazy" pada sebuah img mengarahkan kita ke halaman img, yang menjelaskan eager sebagai perilaku default dan lazy sebagai penunda unduhan hingga gambar mendekati viewport. Contoh kedua: sandbox="allow-forms" pada iframe mengarahkan kita ke halaman iframe beserta daftar token izin yang sah.

Kedua temuan riset dari alur di atas kita rangkum menjadi halaman catatan berikut:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Riset Atribut</title>
</head>
<body>
  <main>
    <h1>Kartu Riset Atribut</h1>
    <p>Hasil menelusuri dua atribut yang dijumpai pada kode teman satu tim.</p>
    <section>
      <h2>loading pada img</h2>
      <p>Nilai <code>eager</code> berarti gambar dimuat langsung, sedangkan <code>lazy</code> menunda unduhan hingga gambar mendekati viewport.</p>
    </section>
    <section>
      <h2>sandbox pada iframe</h2>
      <p>Atribut ini membatasi kemampuan konten sematan; token seperti <code>allow-scripts</code> menentukan izin yang diberikan.</p>
    </section>
  </main>
</body>
</html>

Output yang Dihasilkan:

Browser menampilkan kartu riset dengan judul "Kartu Riset Atribut" dan
dua bagian bertajuk; setiap bagian berisi satu kalimat ringkasan temuan
tentang atribut yang ditelusuri.

Mari kita telaah perannya satu per satu:

1. Baris 10 (<h1>): judul kartu yang menyatakan isi dokumen secara gamblang.
2. Baris 11 (<p>): kalimat pengantar yang menjelaskan asal temuan, yaitu kode teman satu tim.
3. Baris 12-15 (<section> pertama): catatan riset atribut loading; istilah eager dan lazy ditandai elemen code karena berupa nilai literal.
4. Baris 16-19 (<section> kedua): catatan riset atribut sandbox beserta contoh token allow-scripts.
5. Baris 20-21: penutup main dan body yang menandai akhir kartu.

Atribut juga menjadi gerbang menuju topik yang menuntut ketelitian ekstra: aksesibilitas. Chapter berikutnya memperkenalkan hub resmi W3C yang menghimpun tutorial, standar, dan pola komponen untuk halaman yang dapat dipakai semua pengunjung.

Referensi resmi untuk pendalaman:

• MDN Web Docs — HTML attributes reference
• MDN Web Docs — Global attributes
• MDN Web Docs — Elemen img
• MDN Web Docs — Elemen iframe

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Riset Atribut</title>
</head>
<body>
  <main>
    <h1>Kartu Riset Atribut</h1>
    <p>Hasil menelusuri dua atribut yang dijumpai pada kode teman satu tim.</p>
    <section>
      <h2>loading pada img</h2>
      <p>Nilai <code>eager</code> berarti gambar dimuat langsung, sedangkan <code>lazy</code> menunda unduhan hingga gambar mendekati viewport.</p>
    </section>
    <section>
      <h2>sandbox pada iframe</h2>
      <p>Atribut ini membatasi kemampuan konten sematan; token seperti <code>allow-scripts</code> menentukan izin yang diberikan.</p>
    </section>
  </main>
</body>
</html>