Apa Itu Atribut HTML?

Apa jadinya jika kita menulis tag HTML tanpa atribut?

Kita tidak bisa menyesuaikan perilaku setiap tag HTML, termasuk menyesuaikan gaya atau menambahkan CSS.

Tanpa atribut, tag HTML menjadi monoton, karena kita tidak bisa mengatur perilakunya.

Oleh karena itu, penting untuk memahami atribut secara detail agar kita dapat mengatur perilaku elemen HTML.

Mari kita bahas.

1. Apa Itu Atribut?
2. Jenis Atribut HTML
   1. Atribut Global
   2. Atribut Event
   3. Atribut Khusus
3. Cara Menulis Atribut yang Benar
   1. Gunakan Huruf Kecil
   2. Bungkus Nilai Atribut dengan Petik Ganda
   3. Gunakan Spasi untuk Memisahkan Atribut

Apa Itu Atribut?

Atribut HTML adalah teks khusus yang digunakan di dalam tag HTML pembuka untuk mengontrol perilaku elemen.

Atribut terdiri dari dua bagian, yaitu nama dan nilai.

Atribut ditulis mulai dari nama, diikuti dengan tanda sama dengan (=), kemudian nilai atribut dibungkus dengan tanda petik, nama="nilai".

Contoh:

<p style="color: red">hello world</p>

• style adalah nama atribut.
• color: red adalah nilai atribut.

Kita dapat menulis lebih dari satu atribut di dalam tag pembuka HTML.

Contoh:

<p style="color: red" class="text" id="text">hello world</p>

Tidak semua atribut memiliki nilai, ada juga atribut yang tidak membutuhkan nilai alias teks kosong, diantaranya required, disabled dan sebagainya.

Contoh:

<input required />

Kode di atas sama saja dengan:

<input required="" />
<!-- atau -->
<input required="true" />

Ketika kita menggunakan atribut yang tidak membutuhkan nilai atau teks kosong, biasanya tanda sama dengan dan tanda petik tidak ditulis seperti contoh pertama karena lebih singkat.

Tapi, contoh pertama dan kedua sama saja, browser akan menangani atribut tersebut dengan cara yang sama.

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.

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:

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:

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>