HTML : Pengertian, Cara Penggunaan, dan Atribut HTML Paling Penting
Atribut HTML adalah informasi tambahan yang dituliskan di dalam tag HTML untuk mengatur perilaku, fungsi, tampilan, dan interaksi suatu elemen. Tanpa atribut, elemen HTML hanya bersifat dasar dan statis. Dengan atribut, HTML menjadi lebih dinamis, interaktif, mudah diakses, dan dapat terhubung dengan CSS serta JavaScript.
1. Pengertian Atribut HTML
Atribut HTML ditulis di dalam tag pembuka (opening tag) dan biasanya berpasangan dengan nilai. Atribut memberikan instruksi khusus kepada browser tentang bagaimana sebuah elemen harus diperlakukan.
Struktur dasar atribut:
<tag atribut="nilai">Konten</tag>
Tidak semua atribut membutuhkan nilai, beberapa bersifat boolean
(seperti disabled atau checked).
2. Cara Menggunakan Atribut HTML
Penggunaan atribut harus mengikuti aturan HTML agar valid dan mudah dipahami:
- Atribut ditulis setelah nama tag
- Gunakan tanda kutip untuk nilai atribut
- Satu elemen dapat memiliki banyak atribut
- Nama atribut tidak bersifat case-sensitive
Contoh penggunaan:
<img src="gambar.jpg" alt="Contoh gambar" width="300">3. Jenis-Jenis Atribut HTML
a. Global Attributes
Global attributes adalah atribut yang dapat digunakan pada hampir semua elemen
HTML. Contohnya id, class, style,
title, dan data-*.
b. Event Attributes
Event attributes digunakan untuk menangani interaksi pengguna seperti klik, input, atau submit. Atribut ini biasanya terhubung dengan JavaScript.
<button onclick="alert('Hello')">Klik</button>c. Element-Specific Attributes
Atribut jenis ini hanya berlaku untuk elemen tertentu, misalnya href
pada tag <a> atau src pada <img>.
4. Atribut HTML yang Paling Berperan Penting
Berikut adalah atribut-atribut yang dianggap paling penting karena sering digunakan dan berperan besar dalam struktur, aksesibilitas, SEO, serta interaksi web.
| Atribut | Digunakan Pada | Peran Utama | Keterangan |
|---|---|---|---|
id |
Semua elemen | Identitas unik | Digunakan untuk targeting CSS, JavaScript, dan anchor link. |
class |
Semua elemen | Pengelompokan | Memungkinkan styling dan manipulasi banyak elemen sekaligus. |
href |
<a> | Navigasi | Menentukan tujuan link dan menjadi inti navigasi web. |
src |
<img>, <script> | Sumber file | Menentukan lokasi resource eksternal. |
alt |
<img> | Aksesibilitas | Penting untuk pembaca layar dan SEO. |
name |
Form element | Data form | Digunakan sebagai key saat data dikirim ke server. |
value |
Input | Nilai data | Menentukan data yang dikirim atau ditampilkan. |
type |
<input> | Perilaku input | Mengubah fungsi input (text, password, email, dll). |
required |
Form element | Validasi | Mencegah form dikirim jika field kosong. |
title |
Semua elemen | Informasi tambahan | Menampilkan tooltip saat diarahkan kursor. |
5. Praktik Terbaik Menggunakan Atribut HTML
- Gunakan
altpada semua gambar - Hindari penggunaan
styleinline berlebihan - Manfaatkan
data-*untuk data kustom - Gunakan atribut validasi HTML sebelum JavaScript
- Utamakan aksesibilitas dengan atribut ARIA bila perlu
6. Kesimpulan
HTML atribut merupakan komponen penting yang membuat elemen HTML lebih bermakna, interaktif, dan terstruktur. Dengan memahami jenis, fungsi, dan atribut paling penting dalam HTML, pengembang dapat membuat halaman web yang lebih rapi, aksesibel, dan profesional. Atribut yang digunakan dengan benar akan sangat membantu dalam pengembangan CSS, JavaScript, serta optimasi SEO. Untuk penjelasan tag HTML, lihat Dokumentasi Tag HTML Lengkap dan referensi tag HTML dari MDN
ATRIBUT HTML – GLOBAL
Atribut Global adalah atribut yang dapat digunakan pada hampir semua elemen HTML. Atribut ini berfungsi untuk mengatur identitas elemen, aksesibilitas, perilaku umum, serta integrasi dengan CSS dan JavaScript tanpa bergantung pada jenis elemen tertentu. Berikut daftar lengkap di bawah ini:
| Atribut | Tipe | Digunakan Pada | Fungsi Utama | Keterangan |
|---|---|---|---|---|
accesskey |
Global | Hampir semua elemen | Shortcut keyboard | Menentukan tombol pintasan keyboard untuk memfokuskan atau mengaktifkan elemen tertentu. Penggunaan harus hati-hati agar tidak bentrok dengan shortcut browser. |
autocapitalize |
Global | Elemen input teks | Kapitalisasi otomatis | Mengatur apakah teks yang diketik akan otomatis dikapitalisasi, umum digunakan pada perangkat mobile. |
autofocus |
Global | Form element | Fokus otomatis | Membuat elemen langsung mendapatkan fokus saat halaman dimuat. |
class |
Global | Semua elemen | Pengelompokan elemen | Digunakan untuk memberi satu atau lebih nama kelas pada elemen agar mudah distyling dengan CSS atau diakses JavaScript. |
contenteditable |
Global | Hampir semua elemen | Edit konten langsung | Mengizinkan pengguna mengedit konten elemen secara langsung di browser. |
contextmenu |
Global (deprecated) | Semua elemen | Menu klik kanan | Digunakan untuk menentukan menu konteks khusus. Sudah jarang didukung. |
data-* |
Global | Semua elemen | Data kustom | Menyimpan data kustom yang bisa diakses melalui JavaScript tanpa memengaruhi tampilan. |
dir |
Global | Semua elemen | Arah teks | Mengatur arah teks kiri-ke-kanan (ltr) atau kanan-ke-kiri (rtl). |
draggable |
Global | Hampir semua elemen | Drag and drop | Menentukan apakah elemen dapat diseret menggunakan mouse. |
enterkeyhint |
Global | Input teks | Petunjuk tombol enter | Menentukan label tombol enter virtual pada keyboard mobile. |
hidden |
Global | Semua elemen | Sembunyikan elemen | Menyembunyikan elemen dari tampilan tanpa menghapusnya dari DOM. |
id |
Global | Semua elemen | Identitas unik | Menentukan identitas unik suatu elemen. Tidak boleh ada dua id yang sama dalam satu halaman. |
inputmode |
Global | Input teks | Mode keyboard | Mengatur jenis keyboard virtual yang ditampilkan pada perangkat mobile. |
is |
Global | Custom element | Ekstensi elemen | Digunakan untuk mendefinisikan custom element berbasis elemen bawaan. |
lang |
Global | Semua elemen | Bahasa konten | Menentukan bahasa konten untuk aksesibilitas dan SEO. |
spellcheck |
Global | Input & teks | Pemeriksa ejaan | Mengaktifkan atau menonaktifkan pemeriksaan ejaan otomatis. |
style |
Global | Semua elemen | CSS inline | Menambahkan aturan CSS langsung pada elemen. Disarankan hanya untuk kasus khusus. |
tabindex |
Global | Elemen fokus | Urutan fokus | Mengatur urutan navigasi menggunakan tombol Tab. |
title |
Global | Semua elemen | Tooltip | Menampilkan teks bantuan saat kursor diarahkan ke elemen. |
translate |
Global | Semua elemen | Terjemahan otomatis | Menentukan apakah konten boleh diterjemahkan oleh alat penerjemah. |
inert |
Global | Hampir semua elemen | Menonaktifkan interaksi | Membuat elemen dan seluruh turunannya tidak bisa difokuskan, diklik, atau diakses pembaca layar. Umum dipakai untuk modal/dialog. |
itemid |
Global (Microdata) | Elemen microdata | Identitas item | Menentukan identifier unik untuk item microdata. |
itemprop |
Global (Microdata) | Elemen microdata | Properti item | Menentukan properti dari item microdata untuk data terstruktur. |
itemscope |
Global (Microdata) | Elemen microdata | Lingkup item | Menandai bahwa elemen tersebut adalah sebuah item microdata. |
itemtype |
Global (Microdata) | Elemen microdata | Tipe item | Menentukan tipe item microdata menggunakan URL skema. |
nonce |
Global | Script & style | Keamanan CSP | Digunakan untuk Content Security Policy agar script atau style tertentu diizinkan berjalan. |
part |
Global | Shadow DOM | Styling shadow | Memungkinkan elemen di dalam Shadow DOM distyling dari luar. |
popover |
Global | Elemen UI | Popup native | Mendefinisikan elemen sebagai popover native HTML tanpa JavaScript tambahan. |
role |
Global (ARIA) | Semua elemen | Peran aksesibilitas | Menentukan peran elemen untuk pembaca layar, sangat penting untuk aksesibilitas. |
slot |
Global | Web Component | Distribusi konten | Digunakan pada Web Component untuk menempatkan konten ke slot tertentu. |
spellcheck |
Global | Input & teks | Pemeriksa ejaan | Mengatur apakah browser melakukan pemeriksaan ejaan otomatis. |
tabindex |
Global | Elemen fokus | Urutan fokus | Mengatur urutan fokus saat navigasi keyboard menggunakan tombol Tab. |
title |
Global | Semua elemen | Tooltip | Menampilkan teks bantuan saat kursor diarahkan ke elemen. |
translate |
Global | Semua elemen | Izin terjemahan | Mengatur apakah konten boleh diterjemahkan oleh alat penerjemah otomatis. |
ATRIBUT HTML EVENT
Atribut Event digunakan untuk menangani interaksi pengguna dan peristiwa yang terjadi
di browser, seperti klik, input, pengiriman form, dan navigasi keyboard. Atribut ini
biasanya diawali dengan awalan on dan memungkinkan eksekusi kode JavaScript
secara langsung saat suatu event terjadi. Berikut daftar lengkap di bawah ini:
| Atribut | Event | Digunakan Pada | Fungsi Utama | Keterangan |
|---|---|---|---|---|
onblur |
Focus | Elemen fokus | Kehilangan fokus | Dipicu saat elemen kehilangan fokus, umum pada input form. |
onchange |
Form | Input, select | Perubahan nilai | Dieksekusi saat nilai elemen berubah dan fokus berpindah. |
onclick |
Mouse | Hampir semua elemen | Klik elemen | Event paling umum, dipicu saat elemen diklik oleh pengguna. |
oncontextmenu |
Mouse | Hampir semua elemen | Klik kanan | Dipicu saat menu klik kanan dibuka. |
ondblclick |
Mouse | Hampir semua elemen | Klik ganda | Dieksekusi saat pengguna melakukan double-click. |
onerror |
Media / Resource | img, script, video | Error loading | Dipicu saat terjadi kesalahan pemuatan resource. |
onfocus |
Focus | Elemen fokus | Mendapat fokus | Dipicu saat elemen menerima fokus. |
oninput |
Form | Input, textarea | Input realtime | Dipicu setiap kali nilai input berubah secara langsung. |
onkeydown |
Keyboard | Elemen fokus | Tombol ditekan | Dieksekusi saat tombol keyboard ditekan. |
onkeypress |
Keyboard (deprecated) | Elemen fokus | Tombol karakter | Sudah tidak direkomendasikan, gunakan onkeydown. |
onkeyup |
Keyboard | Elemen fokus | Tombol dilepas | Dipicu saat tombol keyboard dilepas. |
onload |
Window / Media | body, img | Konten dimuat | Dieksekusi setelah halaman atau media selesai dimuat. |
onmousedown |
Mouse | Hampir semua elemen | Tombol mouse ditekan | Dipicu saat tombol mouse ditekan. |
onmouseenter |
Mouse | Hampir semua elemen | Mouse masuk | Dipicu saat pointer masuk ke area elemen. |
onmouseleave |
Mouse | Hampir semua elemen | Mouse keluar | Dipicu saat pointer meninggalkan elemen. |
onmousemove |
Mouse | Hampir semua elemen | Gerakan mouse | Dieksekusi saat mouse bergerak di atas elemen. |
onmouseover |
Mouse | Hampir semua elemen | Mouse di atas | Mirip onmouseenter namun mendeteksi elemen anak. |
onmouseout |
Mouse | Hampir semua elemen | Mouse keluar | Dipicu saat mouse keluar dari elemen atau anaknya. |
onmouseup |
Mouse | Hampir semua elemen | Tombol mouse dilepas | Dieksekusi saat tombol mouse dilepas. |
onreset |
Form | form | Reset form | Dipicu saat form di-reset. |
onscroll |
UI | Window, container | Scroll halaman | Dieksekusi saat pengguna melakukan scroll. |
onsubmit |
Form | form | Kirim form | Dipicu saat form dikirim ke server. |
ontouchstart |
Touch | Perangkat sentuh | Sentuhan dimulai | Event sentuhan untuk perangkat mobile. |
ontouchend |
Touch | Perangkat sentuh | Sentuhan selesai | Dipicu saat sentuhan dilepas. |
ATRIBUT HTML KHUSUS ELEMEN
Atribut Khusus Elemen adalah atribut yang hanya berlaku pada elemen HTML tertentu.
Atribut ini digunakan untuk mengatur fungsi spesifik suatu tag, seperti href
pada tag <a>, src pada <img>, atau type
pada <input>, sehingga elemen dapat bekerja sesuai perannya. Berikut daftar lengkap di bawah ini:
| Atribut | Tag Terkait | Fungsi Utama | Keterangan Detail |
|---|---|---|---|
accept |
<input> | Jenis file | Menentukan tipe file yang diperbolehkan saat menggunakan input tipe file. |
action |
<form> | Tujuan form | Menentukan URL tujuan pengiriman data form. |
alt |
<img>, <area> | Teks alternatif | Menampilkan deskripsi gambar jika gagal dimuat dan penting untuk aksesibilitas. |
async |
<script> | Load async | Menginstruksikan browser memuat script secara asynchronous tanpa memblokir HTML. |
autoplay |
<audio>, <video> | Putar otomatis | Membuat media diputar otomatis saat halaman dimuat. |
checked |
<input> | Status terpilih | Menentukan status awal checkbox atau radio button. |
cols |
<textarea> | Lebar textarea | Menentukan jumlah kolom tampilan textarea. |
colspan |
<td>, <th> | Gabung kolom | Menggabungkan beberapa kolom tabel menjadi satu sel. |
controls |
<audio>, <video> | Kontrol media | Menampilkan kontrol bawaan seperti play, pause, dan volume. |
defer |
<script> | Tunda eksekusi | Menunda eksekusi script sampai dokumen selesai diparsing. |
disabled |
<input>, <button>, <select> | Nonaktifkan elemen | Membuat elemen tidak bisa diinteraksi oleh pengguna. |
download |
<a> | Unduh file | Memaksa browser mengunduh file saat link diklik. |
for |
<label> | Relasi label | Menghubungkan label dengan elemen input menggunakan id. |
href |
<a>, <link> | Alamat tujuan | Menentukan URL tujuan hyperlink atau resource eksternal. |
loop |
<audio>, <video> | Ulang media | Mengulang pemutaran media setelah selesai. |
max |
<input>, <meter> | Nilai maksimum | Menentukan batas nilai maksimum. |
maxlength |
<input>, <textarea> | Batas karakter | Membatasi jumlah karakter yang dapat dimasukkan. |
method |
<form> | Metode kirim | Menentukan metode HTTP (GET atau POST) untuk pengiriman form. |
min |
<input>, <meter> | Nilai minimum | Menentukan batas nilai minimum. |
multiple |
<input>, <select> | Pilihan jamak | Mengizinkan pengguna memilih lebih dari satu nilai. |
muted |
<video>, <audio> | Bisukan audio | Mengatur media agar dimulai tanpa suara. |
name |
<input>, <form> | Nama data | Digunakan sebagai key saat data dikirim ke server. |
placeholder |
<input>, <textarea> | Teks petunjuk | Menampilkan teks petunjuk sementara di field input. |
poster |
<video> | Thumbnail video | Menampilkan gambar preview sebelum video diputar. |
readonly |
<input>, <textarea> | Hanya baca | Mencegah perubahan nilai tanpa menonaktifkan elemen. |
required |
<input>, <select> | Wajib diisi | Mengharuskan pengguna mengisi field sebelum submit. |
rows |
<textarea> | Tinggi textarea | Menentukan jumlah baris tampilan textarea. |
selected |
<option> | Pilihan awal | Menentukan opsi yang terpilih secara default. |
src |
<img>, <script>, <video> | Sumber file | Menentukan lokasi file resource. |
target |
<a>, <form> | Target buka | Menentukan di mana link atau form dibuka (misalnya tab baru). |
type |
<input>, <button> | Jenis input | Menentukan tipe perilaku elemen seperti text, submit, password, dll. |
value |
<input>, <option> | Nilai data | Menentukan nilai yang dikirim atau ditampilkan. |