Atribut HTML
Jenis Atribut HTML
Tidak semua atribut dapat ditulis di semua tag HTML, ada beberapa atribut yang hanya bisa digunakan pada tag-tag tertentu saja.
Ada juga yang bisa digunakan di semua tag.
Mari kita pelajari lebih lanjut beberapa macam atribut yang bisa kita gunakan.
1. Atribut Global
Atribut global adalah atribut yang bisa digunakan di semua tag HTML.
Berikut daftar beberapa atribut global dan fungsinya.
| Atribut | Keterangan |
|---|---|
id | id unik elemen |
class | kelas memungkinkan CSS dan JavaScript mengakses elemen |
style | untuk menambahkan gaya CSS |
title | judul elemen terkait |
lang | bahasa elemen |
tabindex | urutan elemen ketika tombol tab keyboard ditekan |
accesskey | tombol pintas untuk mengakses elemen |
autofocus | elemen akan difokuskan setelah halaman dimuat |
spellcheck | apakah ejaan konten elemen ingin diperiksa atau tidak |
translate | untuk menerjemahkan teks |
contenteditable | konten yang dapat diedit |
dir | arah teks elemen |
draggable | elemen dapat diseret |
hidden | menyembunyikan elemen |
data-* | untuk membuat atribut data khusus |
aria-* | untuk meningkatkan aksesibilitas |
2. Atribut Event
Atribut event adalah atribut global yang bisa digunakan di semua tag HTML, tapi nilainya berupa kode JavaScript.
Mari kita lihat contoh berikut:
<button onclick="alert('Tombol di-klik!')">Submit</button>
onclick adalah atribut event yang akan mengeksekusi kode JavaScript di dalam tanda petik ketika elemen di-klik.
Dalam hal ini, jika kita mengklik tombol Submit, maka pop-up alert berisi pesan Tombol di-klik! akan muncul.
Ada banyak atribut event yang bisa kita gunakan, ada yang dipicu ketika elemen di klik, ada juga yang dipicu ketika tombol mouse di-klik, tergantung atribut event yang digunakan.
Berikut beberapa atribut event dan fungsinya:
| Atribut | Keterangan (pemicu) |
|---|---|
onclick | elemen diklik |
onchange | nilai elemen berubah |
onkeypress | tombol ditekan |
onkeyup | tombol dilepas setelah ditekan |
onload | elemen dimuat |
onscroll | ketika scrolling |
onmousedown | klik kiri/tengah mouse ditekan |
onmousemove | mouse bergerak |
onmouseout | kursor mouse keluar elemen |
onmouseup | klik mouse dilepas |
3. Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa digunakan pada tag-tag tertentu saja.
Berikut beberapa atribut khusus dan tag yang dapat menggunakan atribut tersebut:
| Atribut | Tag | Keterangan |
|---|---|---|
src | <audio>, <img>, <video>, <source>, <track> | URL media |
action | <form> | menentukan kemana data formulir dikirim |
accept | <form>, <input> | jenis file yang dapat diterima |
alt | <img>, <input> | teks alternatif jika elemen gagal dimuat |
autocomplete | <form>, <input>, <select>, <textarea> | pelengkap kata otomatis |
colspan | <td>, <th> | jumlah kolom sel tabel yang harus diisi |
href | <a>, <link> | URL halaman yang dituju |
rel | <a>, <link> | menentukan hubungan antar dokumen |
method | <form> | HTTP method untu mengirim data formulir |
Cara Menulis Atribut yang Benar
Atribut HTML dapat ditulis sesuai keinginan termasuk menggunakan huruf kecil/besar, menggunakan tanda petik ganda/tunggal dan sebagainya.
Tapi kita disarankan untuk mengikuti konvensi penulisan atau kebiasaan umum agar elemen HTML dianggap valid dan terlihat lebih rapi.
1. Gunakan Huruf Kecil
Kita dapat menulis atribut HTML menggunakan huruf besar maupun kecil, ini akan dianggap valid oleh W3C.
Tapi, disarankan untuk menulis nama atribut menggunakan huruf kecil semua.
Gunakan huruf kecil semua:
<p style="color: red">Hello World</p>
Jangan gunakan huruf besar atau campuran:
<p STYLE="COlor: red">Hello World</p>
2. Bungkus Nilai Atribut dengan Petik Ganda
Selalu gunakan tanda petik untuk membungkus nilai atribut.
Utamakan menggunakan tanda petik ganda, kecuali jika atribut mengandung petik ganda.
Selalu gunakan petik ganda:
<button type="submit" class="btn-login">Login</button>
Jangan menulis nilai atribut tanpa pembungkus tanda petik:
<button type=submit class=btn-login>Login</button>
Gunakan petik tunggal ketika nilai berisi petik ganda, atau sebaliknya:
<button onclick='alert("hello world")'>Login</button>
<button onclick="alert('hello world')">Login</button>
Jangan menggunakan petik ganda ketika nilai berisi petik ganda, begitupula petik tunggal:
<button onclick='alert('hello world')'>Login</button>
<button onclick="alert("hello world")">Login</button>
3. Gunakan Spasi untuk Memisahkan Atribut
Satu tag pembuka dapat menampung lebih dari satu atribut, agar lebih mudah dibaca pisahkan menggunakan spasi.
Gunakan spasi sebagai pemisah atribut:
<button type="submit" class="btn-login">Login</button>
Jangan menulis beberapa atribut tanpa spasi:
<button type="submit"class="btn-login"id="btn">Login</button>
Komentar
Posting Komentar