Atribut

Apa itu Atribut?

Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perliaku dari elemen.

 

Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan atribut seperti elemen <a>, <img>, <video>, dll.

Contoh:

<a href="https://petanikode.com">Petanikode.com</a>

Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk menyatakan halaman tujuan dari link.

Jumlah atribut pada elemen bisa lebih dari satu.

Contoh:

<img src="gambar.jpg" width="100" height="100" />

Atribut src adalah atribut khusus untuk tag <img> yang fungsinya untuk menentukan gambar yang akan ditampilkan. Lalu atrubut width dan height adalah atribut yang mengatur ukurannya.

Jenis-jenis Atribut HTML

Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.

Berikut ini jenis-jenis atribut yang harus diketahui:

  1. Atribut Global

Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.

Berikut ini daftar atribut global dan fungsinya:

Atribut	Penjelasan
accesskey	Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen.
class	Menentukan class CSS yang akan digunakan.
contenteditable	Menentukan isi elemen bisa diedit atau tidak.
data-*	Digunakan untuk menyimpan data.
dir	Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya).
draggable	Menentukan apakah elemen bisa di drag atau tidak
hidden	Untuk menyembunyikan elemen.
id	Menentukan id unik untuk elemen.
lang	Menentukan bahasa yang digunakan untuk isi elemen.
spellcheck	Menentukan apakah isi elemen harus dilakukan pengerjaan grammer atau tidak.
style	Menentukan inline CSS untuk elemen.
tabindex	Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan).
title	Menentukan informasi tambahan tentang elemen
translate	Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak.

2. Atribut Event

Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada pemrograman Javascript.

Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:

Nama atribut	Nilai	Fungsi Menjalankannya
onafterprint	Kode javascript	Setelah dokumen dicetak
onbeforeprint	Kode javascript	Sebelum dokumen dicetak
onbeforeunload	Kode javascript	Sebelum saat dokumen tidak ter-load
onerror	Kode javascript	Saat terjadi error
onhashchange	Kode javascript	Saat terjadi perubahan pada bagian anchor di URL
Onload	Kode javascript	Setelah loading selesai
onmessage	Kode javascript	Saat ada pesan
onoffline	Kode javascript	Saat tiba-tiba offline
ononline	Kode javascript	Saat tiba-tiba online
onpagehide	Kode javascript	Saat user tidak sedang membuka halaman web
onpageshow	Kode javascript	Saat user membuka kembali halaman web
onpopstate	Kode javascript	Saat history browser berubah
onresize	Kode javascript	Saat ukuran jendela bro
onstorage	Kode javascript	Saat area penyimpanan (Web Storage) di update
onunload	Kode javascript	Saat web browser ditutup

3. Atribut Khusus

Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut ini tidak bisa digunakan pada elemen yang lain.

 

Nama Atribut	Bisa dipakai di Tag
src	<audio>, <embed>, <iframe>, <img>, dll
href	<a>, <link>
action	<from>
autoplay	<audio>, <vidio>

 

Cara Menulis Atribut yang Benar!

Penulisan atribut sebenarnya gampang.. kita hanya perlu menambahkannya pada tag pembuka dengan format seperti ini:

bana-atribut="nilai"

Namun, ada beberapa hal yang perlu diperhatikan agar penilisannya benar dan valid:

1. Gunakan Huruf Kecil

Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut validator W3C.

Tapi saya sarankan menggunakan huruf kecil saja. Karena lebih umum digunakan dan juga mudah terbaca.

Contoh: (bagus)

<p align="center">Belajar HTML di Petani Kode</p>

Contoh: (kurang bagus)

<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>

2. Guanakan Tanda Petik

Gunkan tanda petik untuk mengisi nilai atribut yang mengandung teks.

Mengapa?

Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.

Contoh: (bagus)

<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>

Contoh: (buruk)

<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>

Tanda petik yang digunakan, boleh petik ganda (") dan juga petik tunggal (').

Nah untuk nilai angka, boleh pakai tanda petik dan juga boleh tidak.

Contoh:

<img src="gambar.jpg" width=120 height=120 />

Lalu, untuk atribut yang bernilai boolean (true dan false).. nilainya boleh ditulis dan boleh tidak.

Contoh:

<input type="text" required="true" />
<input type="text" required />

3. Penggunaan Spasi

Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min (-), bukan spasi.

Contoh:

<img data-src="gambar.jpg" />

Lalu, spasis juga digunakan untuk memisahkan dua atau lebih atribut.

Contoh:

<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />

Bisa juga ditulis seperti ini:

<img class="lazyload" 
    data-src="gambar.jpg" 
    src="placeholder.jpg" />

Contoh Atribut <audio>

   <audio src="https://a.top4top.io/m_1531wbwv29.mp3" autoplay="autoplay"></audio>