tRikSonic
Tema
  • Original
  • Translate

HTML data-* Attribute

Terakhir diperbarui : 8 April 2018 - 09.43
HTML data-* Attribute - HTML data-* Attribute Digunakan untuk menentukan data tambahan pada sebuah element baik itu data berupa teks ataupun image, pengambilan data pada element data-* Attribute, bisa melalui fungsi CSS maupun java script. Dalam Penggunaan HTML data-* Attribute tidak dibolehkan menggunakan huruf kapital dan ada jarak spasi setelah kata data-.
Contoh penulisan yang benar :
data-nama, data-kelas, data-umur dan seterusnya.

Attribute Value:

Attribute Value Deskripsi
data-* data value Menentukan nama data setelah kata data-

Contoh penerapan HTML data-* Attribute

<ol>
  <li data-nama="data"> isi teks </li>
  <li data-jabatan="data"> isi teks </li>
</ol>

CSS yang diperlukan dari contoh html diatas

contoh css bersifat tidak mutlak

/* css [data-nama] */  
li[data-nama]:before {
  content: "Nama :";
  color : red;
  font-family:arial;
}

/* css [data-jabatan] */ 
li[data-jabatan]:before {
  content: "Jabatan :";
  color : blue;
  font-family:arial;
}

Browser Support:
Nilai pada tabel adalah minimal versi browser support untuk attibut data-*
HTML
Attribute Chrome Safari Firefox Opera IE
data-* 4.0 3.1 2.0 9.6 5.5
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.