Atribut HTML

 

Atribut HTML

Pada sub-modul sebelumnya kita sudah mengenal apa itu elemen. Elemen dituliskan dengan awalan tag pembuka <> dan diakhiri dengan tag penutup </>. Ada satu hal lagi yang bisa kita tuliskan pada sebuah elemen, lebih tepatnya pada sebuah tag pembuka, yaitu Attribute. Atribut ini berfungsi memberikan informasi tambahan pada sebuah elemen. Atribut dituliskan pada tag pembuka sebuah elemen setelah nama dari elemennya tersebut ditulis. Contohnya:

<p lang="id">pontianak adalah ibu kota dari kalimantan barat.</p>

Pada contoh kode tersebut, kita menetapkan artibut bahasa (dengan penulisan lang) dengan nilai “id” atau Indonesia (kode bahasa bisa kita explore pada link berikut: https://www.w3schools.com/tags/ref_language_codes.asp) pada sebuah elemen paragraf.

Untuk menuliskan sebuah atribut kita memerlukan nama dari atribut itu diikuti dengan nilai atribut tersebut dalam bentuk string (Dituliskan dalam tanda kutip dua). Untuk lebih jelasnya, perhatikan gambar berikut:
 

Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa menuliskan kembali seluruh struktur atribut di samping dari atribut yang sudah ada. Contohnya pada elemen paragraf di atas, kita akan memberikan sebuah atribut translate, sehingga penulisannya menjadi seperti ini:

<p lang="id" translate="no">sambas adalah kabupaten yang ada di kalimantan barat.</p>

Dengan menambahkan atribut translate dan memberikan nilai “no” pada elemen paragraf tersebut, maka konten dari elemen yang dimaksud tidak akan diterjemahkan oleh layanan sistem translate otomatis seperti Google Translate.

Lantas atribut apa saja yang dapat digunakan pada elemen HTML? Pada elemen HTML terdapat dua jenis atribut, yaitu Global Attribute dan atribut yang hanya bisa digunakan pada elemen tertentu. Untuk atribut yang spesifik pada sebuah elemen, kita akan mengulasnya   pada pembahasan elemen tersebut. Untuk Global Attribute, berikut daftar atribut yang bisa kita gunakan di seluruh elemen HTML.

Attribute	Description
accesskey	Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah element.
class	Menentukan satu atau lebih classname untuk sebuah elemen.
contenteditable	Menentukan konten dari elemen merupakan konten yang dapat diubah atau tidak.
data-*	Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau aplikasi.
dir	Menentukan arah teks untuk konten pada suatu elemen.
draggable	Menentukan apakah suatu elemen dapat di-drag atau tidak.
dropzone	Menentukan apakah data yang di-drag adalah data yang disalin, dipindahkan, atau ditautkan saat dijatuhkan.
hidden	Menentukan apakah suatu elemen ditampilkan atau tidak pada browser.
id	Menetapkan id pada elemen.
lang	Menentukan bahasa pada konten elemen.
spellcheck	Menentukan apakah elemen harus diperiksa ejaannya dan tata bahasanya atau tidak.
style	Menentukan styling secara satu baris untuk suatu elemen.
tabindex	Menentukan urutan dari suatu elemen.
title	Menentukan informasi tambahan tentang suatu elemen.
translate	Menentukan apakah konten elemen harus diterjemahkan atau tidak.