Global Attributes

Chapter sebelumnya membahas atribut yang melekat pada elemen tertentu, misalnya src pada img. Ada pula kelompok atribut yang dapat dipasang pada seluruh elemen HTML: global attributes. Dua atribut paling sering dipakai di web, id dan class, termasuk dalam kelompok ini. Pada Chapter ini kita mengenal anggota yang paling sering dipakai beserta aturan penulisannya.

Apa itu Global Attributes #

Menurut dokumentasi MDN, global attributes adalah atribut yang sama-sama dipakai seluruh elemen HTML, walaupun pada sebagian elemen tidak berpengaruh apa pun. Kata “semua” menyatakan kebolehan penulisan, bukan kepastian efek — atribut title, misalnya, sah ditulis pada elemen meta tetapi tidak menampilkan tooltip di sana.

Daftar lengkapnya panjang; hanya sebagian kecil yang dipakai sehari-hari. Tabel berikut memetakan anggota yang paling sering dipakai:

id: Pengenal Unik untuk Satu Elemen #

Atribut id memberi nama identitas pada satu elemen. Nilainya wajib unik dalam satu dokumen: tidak boleh ada dua elemen dengan id sama, dan nilainya tidak boleh mengandung spasi. id dipakai CSS dan JavaScript untuk memilih elemen, serta menjadi target tautan menuju bagian halaman.

<h2 id="kontak">Kontak warung</h2>

class: Label Kelompok yang Boleh Dipakai Berulang #

Atribut class memberi label kelompok dan berperilaku kebalikan id: satu class boleh dipakai banyak elemen, dan satu elemen boleh membawa beberapa class sekaligus; antarkelas dipisah spasi.

<p class="menu pedas">Seblak level lima.</p>
<p class="menu">Es teh manis.</p>

Perbedaan kuncinya:

title, lang, dan hidden #

Atribut title menyimpan teks tambahan yang muncul sebagai tooltip saat kursor pengunjung melayang di atasnya. Atribut lang menyatakan bahasa konten elemen, sehingga kutipan berbahasa lain memperoleh penanda yang benar. Atribut hidden adalah boolean: kehadirannya membuat elemen tidak dirender sama sekali oleh browser.

<p lang="jv">Kula badhe dhahar soto.</p>
<p hidden>Baris ini tidak tampil.</p>

data-*: Menyimpan Data Milik Kita #

Atribut berawalan data- disebut custom data attribute: wadah resmi data khusus aplikasi pada elemen. Nama setelah data- ditulis huruf kecil, boleh memuat angka dan tanda hubung, tetapi tidak boleh memuat spasi maupun huruf besar. JavaScript membacanya melalui properti dataset; pembahasannya menunggu section HTML dan JavaScript.

<p data-harga="15000" data-level="5">Seblak level lima.</p>

tabindex dan contenteditable #

tabindex mengatur urutan fokus saat pengunjung menekan tombol Tab: nilai 0 membuat elemen ikut urutan dokumen, nilai negatif membuat elemen hanya dapat difokuskan lewat JavaScript, sedangkan nilai positif tidak disarankan karena melawan urutan alami. contenteditable="true" membuat konten dapat diedit langsung di browser, fitur yang dipakai banyak editor web modern.

Contoh Lengkap dalam Satu File #

File berikut memasang hampir seluruh global attributes di atas dalam satu dokumen. Simpan sebagai atribut-global.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>Atribut Global</title>
</head>
<body>
  <h1 id="menu-hari-ini" class="judul">Menu hari ini</h1>
  <p class="menu pedas" data-harga="15000">Seblak level lima.</p>
  <p class="menu" data-harga="8000">Es teh manis.</p>
  <p title="Catatan Budi">Arahkan kursor ke paragraf ini.</p>
  <p lang="jv">Kula badhe dhahar soto.</p>
  <p hidden>Baris ini tidak dirender browser.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Heading "Menu hari ini"
  - Dua paragraf menu: "Seblak level lima." dan "Es teh manis."
  - Tooltip "Catatan Budi" saat kursor melayang di atas paragraf ketiga
  - Paragraf berbahasa Jawa "Kula badhe dhahar soto."
  - Paragraf dengan atribut hidden tidak tampil sama sekali

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

1. Baris 9 (<h1 id="menu-hari-ini" class="judul">): satu elemen membawa dua global attributes sekaligus; urutannya bebas.
2. Baris 10 (class="menu pedas"): dua class dipisah spasi, ditambah atribut data-harga.
3. Baris 12 (<p title="Catatan Budi">): title menampilkan tooltip saat kursor melayang.
4. Baris 13 (<p lang="jv">): lang menandai paragraf yang kontennya berbahasa Jawa.
5. Baris 14 (<p hidden>): atribut boolean menyembunyikan paragraf dari hasil render.

Hingga kini elemen yang kita tulis berdiri dalam satu tingkat: satu elemen, satu atribut, satu konten. Halaman web nyata menuntut elemen saling membungkus beberapa tingkat, dan di situlah aturan nesting masuk. Chapter Nested Elements berikutnya membahas pola bersarang yang benar serta kesalahan penyilangan tag.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Global attributes
• MDN Web Docs — data-*
• WHATWG — HTML Living Standard: Global attributes

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Atribut Global</title>
</head>
<body>
  <h1 id="menu-hari-ini" class="judul">Menu hari ini</h1>
  <p class="menu pedas" data-harga="15000">Seblak level lima.</p>
  <p class="menu" data-harga="8000">Es teh manis.</p>
  <p title="Catatan Budi">Arahkan kursor ke paragraf ini.</p>
  <p lang="jv">Kula badhe dhahar soto.</p>
  <p hidden>Baris ini tidak dirender browser.</p>
</body>
</html>