Atribut HTML

Dalam tutorial ini akan belajar bagaimana menggunakan atribut untuk memberi arti lebih pada tag HTML.

Apa itu Atribut?

Atribut mendefinisikan karakteristik tambahan atau properti elemen seperti lebar dan tinggi gambar. Atribut selalu ditentukan dalam tag awal (atau tag pembuka) dan biasanya terdiri dari pasangan nama/nilai seperti nama="nilai". Nilai atribut harus selalu diapit oleh tanda petik.

Juga, beberapa atribut diperlukan untuk elemen tertentu. Misalnya, tag <img> harus berisi atribut src dan alt. Mari kita lihat beberapa contoh penggunaan atribut:

<img src="gambar/smiley.png" lebar="30" tinggi="30" alt="Senyum" />
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe" />

Pada contoh di atas src di dalam tag <img> adalah atribut dan jalur gambar yang disediakan adalah nilainya. Demikian pula href di dalam tag <a> adalah atribut dan tautan yang diberikan adalah nilainya, dan seterusnya.

TIP

Baik tanda kutip tunggal dan ganda dapat digunakan untuk mengutip nilai atribut. Namun, tanda kutip ganda adalah yang paling umum. Dalam situasi di mana nilai atribut itu sendiri berisi tanda kutip ganda, perlu untuk membungkus nilai dalam tanda kutip tunggal, mis., nilai='John "Williams" Jr.'

Ada beberapa atribut dalam HTML5 yang tidak terdiri dari pasangan nama/nilai tetapi hanya terdiri dari nama. Atribut seperti ini disebut atribut Boolean. Contoh beberapa atribut Boolean yang umum digunakan adalah checked = diceklis, disabled = dinonaktifkan, readonly = hanya bisa dibaca, required = diperlukan, dll.

<input type="email" diperlukan />
<input type="kirim" nilai="Kirim" dinonaktifkan />
<input type="kotak centang" dicentang />
<input type="text" value="Hanya membaca teks" readonly />

Kalian akan mempelajari tentang semua elemen ini secara rinci di bab-bab selanjutnya.

CATATAN

Nilai atribut umumnya tidak peka huruf besar/kecil, kecuali nilai atribut tertentu, seperti atribut id dan class. Namun, World Wide Web Consortium (W3C) merekomendasikan huruf kecil untuk nilai atribut dalam spesifikasinya.

Atribut Tujuan Umum

Ada beberapa atribut, seperti id, title, class, style, dll. yang dapat Anda gunakan pada sebagian besar elemen HTML. Bagian berikut menjelaskan penggunaannya.

Atribut id

Atribut id digunakan untuk memberikan nama atau pengenal unik ke elemen dalam dokumen. Ini membuatnya lebih mudah untuk memilih elemen menggunakan CSS atau JavaScript.

<input type="text" id="namadepan" />
<div id="container">Beberapa konten</div>
<p id="infoText">Ini adalah paragraf.</p>

CATATAN

Id elemen harus unik dalam satu dokumen. Tidak ada dua elemen dalam dokumen yang sama dapat diberi nama dengan id yang sama, dan setiap elemen hanya dapat memiliki satu id.

Atribut class

Seperti atribut id, atribut class juga digunakan untuk mengidentifikasi elemen. Namun tidak seperti id, atribut class tidak harus unik dalam dokumen. Ini berarti Anda dapat menerapkan kelas yang sama ke beberapa elemen dalam dokumen, seperti yang ditunjukkan pada contoh berikut:

<input type="text" class="sorot" />
<div class="box highlight">Beberapa konten</div>
<p class="highlight">Ini adalah paragraf.</p>

TIP

Karena sebuah class dapat diterapkan ke beberapa elemen, maka aturan gaya apa pun yang ditulis ke class tersebut akan diterapkan ke semua elemen yang memiliki class tersebut.

Atribut title

Atribut title to digunakan untuk memberikan teks nasihat tentang suatu elemen atau isinya. Cobalah contoh berikut untuk memahami cara kerjanya.

<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Klik untuk melihat gambar yang lebih besar">
  <img src="gambar/layang-layang-jempol.jpg" alt="layang-layang" />
</a>

TIP

Nilai atribut title (yaitu teks judul) ditampilkan sebagai tooltip oleh browser web ketika pengguna menempatkan kursor mouse di atas elemen.

Atribut style

Atribut style memungkinkan Anda untuk menentukan aturan gaya CSS seperti warna, font, batas, dll. langsung di dalam elemen. Mari kita lihat contoh untuk melihat cara kerjanya:

<p style="color: blue;">Ini adalah paragraf.</p>
<img src="gambar/langit.jpg" style="lebar: 300px;" alt="Langit Mendung" />
<div style="border: 1px solid red;">Beberapa konten</div>

Kalian akan mempelajari lebih lanjut tentang menata elemen HTML di bab Gaya HTML.

Atribut yang telah kita bahas di atas juga disebut atribut global. Untuk atribut global lainnya, silakan lihat referensi atribut global HTML5.

Daftar lengkap atribut untuk setiap elemen HTML tercantum di dalam referensi tag HTML5.