Yang Harus Anda Ketahui Tentang Atribut Data HTML5

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Atribut data HTML5 memungkinkan Anda menetapkan data kustom ke sebuah elemen. Artikel ini membahas bagaimana menggunakannya dan memberikan contoh kapan idealnya akan digunakan.

Pengenalan

Sebelum HTML5, kita harus mengandalkan penggunaan atribut 'class' atau 'rel' untuk menyimpan cuplikan kecil data yang dapat kita gunakan di situs web kita. Hal ini terkadang menimbulkan masalah dan bisa menimbulkan konflik antara penataan dan fungsionalitas situs web. Munculnya HTML5 memperkenalkan atribut baru yang dikenal sebagai 'data'. Pada artikel ini saya akan melihat beberapa contoh bagaimana kita akan menggunakan atribut ini dan juga bagaimana penggunaannya dengan benar.

Karena situs web menjadi lebih didorong data dan mirip aplikasi, mereka cenderung menyimpan lebih banyak data tentang elemen tertentu. Ambil, misalnya, jika kita membuat aplikasi audio. Kita mungkin memiliki markup standar seperti:

1	<audio controls="controls">
2	<source src="track1.mp3" type="audio/mpeg" />
3	</audio>

Markup di atas bisa diterima tapi terkadang kita mungkin ingin menyimpan lebih banyak informasi tentang setiap lagu selain sumbernya. Misalnya kita mungkin ingin bisa memberikan informasi trek tertentu seperti durasi, tempo dan artis. Kita bisa melakukan ini dengan menugaskan atribut data kustom ke setiap sumber audio seperti:

1	<audio controls="controls">
2	<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
3	</audio>

Dengan menyediakan atribut data khusus ini, kita dapat melakukan tugas seperti pencarian, penyaringan atau mengelompokkannya dalam aplikasi kita berdasarkan durasi, tempo, atau artis dengan menggunakan nilai yang terkait.

Cara Menggunakan Data-attribute

Nama atribut data harus dimulai dengan string 'data-' dan harus mengandung setidaknya satu karakter setelah tanda hubung menggunakan konvensi penamaan HTML.

Spesifikasi W3C untuk atribut data menyatakan bahwa:

Atribut data kustom dimaksudkan untuk menyimpan data kustom secara pribadi ke halaman atau aplikasi, yang tidak memiliki atribut atau elemen yang lebih sesuai.

Ini berarti bahwa kita hanya boleh menggunakan data itu secara internal dalam aplikasi kita dan seharusnya tidak digunakan untuk menampilkan informasi tersebut kepada pengguna kita. Penting juga untuk dicatat bahwa Anda dapat menetapkan sejumlah atribut khusus ke elemen dengan nilai apapun.

Kapankah Saya harus Menggunakan Atribut Data?

Kami sudah melihat bagaimana Anda bisa menggunakan atribut data meskipun begitu agar Anda bisa mendapatkan pemahaman yang jelas, mari kita lihat beberapa contoh lagi.

Untungnya Webdesigntuts+ sudah membahas beberapa tuts terperinci pada beberapa contoh penggunaan yang bagus. Salah satu tuts melihat bagaimana Anda menggunakannya untuk gaya dan menampilkan menu gelembung pemberitahuan dengan menetapkan item notifikasi dalam tag anchor. Kali ini atribut data digunakan untuk menunjukkan nilai gelembung dari gelembung notifikasi.

1	<a href="#" class="pink" data-bubble="2">Profile</a>

Dalam tip cepat lainnya kita juga bisa melihat bagaimana hal itu digunakan sebagai bagian dari markup untuk tooltip

1	<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

Kali ini digunakan untuk menampilkan teks untuk tooltip.

Kapan Sebaiknya Saya Tidak Menggunakan Atribut Data?

Kita seharusnya tidak menggunakan atribut data untuk apapun yang sudah memiliki atribut yang sudah pantas atau lebih tepat. Misalnya tidak pantas untuk digunakan:

1	<span data-time="20:00">8pm<span>

Ketika kita bisa menggunakan atribut datetime yang sudah didefinisikan dalam elemen time seperti di bawah ini:

1	<time datetime="20:00">8pm</time>

Atribut data tidak boleh dijadikan sebagai alternatif dari meta data atau format micro. Format micro dirancang terutama untuk manusia dan diperkenalkan untuk memberi konteks markup kita. Misalnya jika Anda memiliki Vcard yang memberikan informasi kontak tentang individu atau organisasi maka Anda akan memberinya kelas 'vcard' untuk memberi tahu mesin bahwa ini adalah informasi kontak.

Menggunakan format micro Anda harus menggunakan markup Anda sebagai

1	<div class="vcard">
2	<span class="fn " >Aaron Lumsden</span>
3	</div>

alih-alih menggunakan atribut data seperti

1	<div class="vcard">
2	<span data-name="Aaron Lumsden " >Aaron Lumsden</span>
3	</div>

Untuk mempelajari lebih lanjut tentang format micro Anda dapat mengunjungi Mircorformats.org.

Menggunakan Atribut Data dengan CSS

Setelah kita menerapkan atribut data dalam markup HTML, kita dapat menargetkannya menggunakan CSS. Penting untuk dicatat bahwa Anda sebaiknya tidak menggunakan atribut data secara langsung untuk penggunaan penataan, meskipun dalam beberapa kasus mungkin sesuai. Penargetan atribut data di CSS mirip dengan penargetan atribut lainnya, Anda dapat menggunakannya hanya seperti ini:

1	[data-role="page"] {
2	/* Styles */
3	}

Jika misalnya Anda membuat situs atau aplikasi ramah dengan lintas perangkat, Anda mungkin ingin menargetkan beberapa konten spesifik yang seharusnya hanya Anda lihat di mobile. Ambil markup berikut

1	<div data-role="mobile">
2	Mobile only content
3	</div>

Dengan menggunakan CSS Anda bisa menyembunyikan semua halaman khusus mobile saat dilihat di desktop.

1	div[data-role="mobile"] {
2	display:none;
3	}

Meskipun tidak disarankan untuk menyembunyikan konten berdasarkan perangkat tampilan, mungkin ada beberapa kasus yang sesuai. Anda harus mendasarkan ini pada masing-masing keadaan dan kasus.

Ini juga memungkinkan untuk menggunakan data dari atribut dan menampilkannya melalui CSS. Meskipun spesifikasinya mengatakan bahwa Anda tidak boleh menggunakan data dari atribut kustom untuk ditampilkan kepada pengguna Anda, hal itu dapat dilakukan, dan dalam beberapa situasi mungkin membuktikan sebagai metode terbaik. Beginilah cara pencapaiannya.

1	<div class="test" data-content="This is the div content">test</div>

Di CSS Anda kemudian akan menggunakan elemen pseudo ':after' (atau beberapa konten lain yang dihasilkan) dan menggunakan atribut tersebut sebagai bagian dari konten 'setelahnya' seperti:

.test {
  display: inline-block;
}

.test:after {
  content: attr(data-content);
}

Ini kemudian akan menampilkan 'This is the div content' di div '.text'.

Menggunakan Atribut Data dengan jQuery

Sekarang kita telah melihat bagaimana Anda dapat menargetkan elemen dengan atribut data menggunakan CSS, mari kita lihat bagaimana Anda bisa mendapatkan data itu dengan menggunakan jQuery.

Catatan: Mengolah data berada di luar cakupan tutorial ini, karena tutorial ini ditujukan khusus untuk para pengembang dan desainer front end.

Ada beberapa cara kita bisa mendapatkan data dari elemen menggunakan jQuery. Mari kita lihat beberapa di antaranya.

1	<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

Jika kita memiliki tag anchor, seperti yang di atas, yang memiliki atribut data data-info maka kita bisa mengakses data itu dengan cara yang sama seperti kita akan mendapatkan nilai atribut lainnya.

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

Anda bisa mengujinya dengan membuka konsol js di web inspector Anda, lalu menekan link..

Hal yang hebat tentang atribut data adalah kita juga bisa menggunakannya untuk memberikan data json seperti ini.

1	<a href="google" class="button" data-info='{"foo":"bar"}'></a>

Dengan menggunakan jQuery kita bisa mendapatkan data ini dengan menggunakan metode objek data jQuery.

$('.button').click(function(e) {
   e.preventDefault();
    thisdata = $('div').data('info').foo;
   console.log(thisdata);
 });

Contoh di atas kemudian akan melakukan log "bar" ke console log.

Dukungan Lintas Browser

Saya tahu bahwa sebelum Anda terlalu pusing menggunakan atribut baru ini, Anda akan ingin mengetahui browser mana yang mendukungnya dan kapan Anda bisa menggunakannya. Nah kabar baiknya adalah ia didukung dengan baik di semua browser modern. Apa pun yang mendukung HTML akan dapat mengakses atribut data. Jika Anda menggunakan atribut untuk tujuan penataan dan juga untuk mengakses data (gunakan dengan hati-hati), browser harus mendukung penyeleksi CSS3.

Berita yang lebih bagus lagi adalah bahwa semua browser (bahkan IE7) sudah membiarkan Anda menggunakan atribut data-* pada elemen dan jika Anda menggunakan jQuery 1.4 atau yang lebih baru, Anda dapat mengakses datanya menggunakan objek data jQuery. Namun, jika Anda hanya menggunakan JavaScript maka Anda harus mengakses datanya menggunakan metode 'getAttribute' dari JavaScript.

Untuk daftar lengkap dukungan dari dataset Anda dapat melihat canIuse.com.

Kesimpulan

Karena situs web dan aplikasi web menjadi lebih kompleks dan mulai menyimpan lebih banyak informasi dan data, atribut baru ini jelas merupakan tambahan yang disambut baik pada kotak peralatan. Saya telah menggunakannya dalam beberapa contoh dunia nyata sekarang dan telah menemukan cara yang sangat berguna untuk menyediakan situs web yang lebih responsif (cepat) karena data yang seharusnya ditarik dari server sekarang dapat dihasilkan di markup dan digunakan bila diperlukan.

Untuk meringkas, jika Anda mematuhi tiga peraturan berikut, Anda dapat memastikan bahwa Anda menggunakan atribut baru dengan cara yang paling efektif dan semantik.

Gunakan saja hanya untuk penggunaan internal di situs/aplikasi Anda. Seharusnya tidak, misalnya, digunakan dalam feed XML/RSS untuk digunakan di situs web atau aplikasi eksternal.
Jangan menggunakannya hanya untuk penataan CSS.
Jangan menggunakannya untuk mengganti atribut atau elemen yang ada yang akan lebih semantik atau sesuai.

Sekarang setelah Anda memiliki pemahaman yang lebih dalam tentang atribut data HTML5 dan bagaimana penggunaannya, saya mendorong Anda untuk mulai menerapkannya dalam proyek Anda hari ini.

Sudahkah Anda menggunakannya dalam contoh dunia nyata? Skenario apa yang telah Anda gunakan di dalamnya? Apakah Anda menghemat waktu atau ada sesuatu yang ingin Anda lihat diperpanjang dengan atribut ini? Beri tahu saya di komentar di bawah ini.