Estimasi Waktu Baca: 2 menit

Apa itu Atribut HTML?

Atribut bisa dikatakan adalah informasi tambahan dari suatu elemen HTML. Ia juga yang berperan menentukan perilaku suatu elemen. Atribut terdiri dari dua bagian antara lain name dan value.

  • name – mewakili nama atribut
  • value – mewakili nilai yang akan ditentukan kepada atribut, nilai ini bermacam jenisnya tergantung atribut yang digunakan.

Deklarasi atribut ada di tag pembuka bukan di tag penutup.

Menulis Atribut Dengan Benar

Ada tata cara yang perlu diperhatikan dalam menulis atribut yang baik dan benar.

Penggunaan Huruf Kecil

Penulisan atribut tidak memperhatikan case sensitive, ia bisa ditulis secara uppercase (huruf besar) atau lowercase (huruf kecil). Namun umumnya dan alangkah baiknya penulisan atribut menggunakan huruf kecil.

Dengan menggunakan huruf kecil akan memudahkan kita menulis elemen html secara keseluruhan. Selain itu kode terkesan lebih cantik dan rapi.

Tidak disarankan


<h1 ALIGN="CENTER">Selamat Datang</h1>

Lebih disarankan


<h1 align="center">Selamat Datang</h1>

Penggunaan Tanda Petik

Pada atribut HTML penggunaan tanda petik diperlukan saat kita menentukan nilai atribut. Tanda petik yang digunakan bisa petik satu atau petik dua.

Penggunaan tanda petik bisa wajib hukumnya saat kita mengisi nilai atribut berupa teks dengan lebih dari satu kata.


<h1 title="Halaman Depan Website">Selamat Datang</h1>

Karena bila tidak menggunakan tanda petik maka elemen HTML akan menganggap bahwasannya kata kedua dan seterusnya merupakan atribut baru dan akan menyebabkan kesalahan penulisan sintaks.


<h1 title=Halaman Depan Website>Selamat Datang</h1>

Sedangkan untuk nilai atribut berupa angka, kita bisa memilih apakah akan menggunakannya atau tidak. Keduanya diperbolehkan.


<img src="logo.png" width="150" height="150"/>

Atau


<img src="logo.png" width=150 height=150/>

Terakhir untuk nilai atribut berupa boolean (true/false), nilainya boleh ditulis dan boleh juga tidak ditulis.


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

Atau


<input type="text" required/>

Pengunaan Tanda Hubung dan Spasi

Untuk nama atribut yang terdiri lebih dari satu huruf, tidak boleh dideklarasikan menggunakan spasi, sebagai gantinya gunakan tanda hubung (-).


<img data-src="logo-web.png"/>

Sedangkan penggunaan spasi berfungsi untuk memisahkan atribut satu dengan yang lain.


<img class="logo-web" data-src="logo-web.png" src="logo.png" width="150" height="150" alt="Logo Website"/>

Boleh juga ditulis seperti ini.


<img class="logo-web" 
data-src="logo-web.png" 
src="logo.png" 
width="150" 
height="150" 
alt="Logo Website"/>

Macam-Macam Atribut

Atribut ada beberapa jenis, untuk atribut yang bisa digunakan pada semua elemen disebut atribut global. Namun tidak semua atribut merupakan atribut global, ada beberapa atribut yang diperuntukkan hanya untuk elemen tertentu.

Berikut beberapa jenis atribut yang perlu diketahui.

Atribut Global

Merupakan atribut yang dapat ditambahkan pada semua elemen HTML

  • accesskey
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Atribut Khusus

Atribut yang hanya bisa digunakan oleh elemen tertentu dan terkadang tidak bisa digunakan oleh elemen yang lain

  • action
  • autoplay
  • href
  • src

Atribut Event

Atribut yang digunakan untuk menentukan aksi selanjutnya dari suatu elemen ketika terjadi sesuatu padanya. Atribut jenis ini akan sering dijumpai saat mempelajari pemrograman Javascript

  • onafterprint
  • onbeforeprint
  • onbeforeunload
  • onerror
  • onhashchange
  • onload
  • onmessage
  • onoffline
  • ononline
  • onpagehide
  • onepageshow
  • onpopstate
  • onresize
  • onstorage
  • onunload

dan masih banyak lagi atribut event yang akan dipelajari di materi yang akan datang.