Kostum Atribut Data HTML Menggunakan Atribut Data-*
Costum data atribut memungkinkan user untuk melakukan penambahan informasi yang dimiliki dari dalam tag HTML. Meskipun nama dari atribut ini menunjukkan sebaliknya, namun khusus untuk HTML5 atribut data-* dapat digunakan pada semua elemen HTML.
Sebelum memahami lebih dalam materi tentang Kostum Atribut Data HTML Menggunakan Atribut Data-*, terlebih dahulu pelajari materi tentang: Menentukan URL File HTML Menggunakan Atribut Data, Mengedit Konten HTML Menggunakan Atribut Contenteditable, dan Penggunaan Atribut Content HTML dan Fungsinya.
Atribut data-* dapat digunakan untuk mendefinisikan costum data atribut yang dibuat sendiri. Atribut ini digunakan untuk menyimpan data khusus secara pribadi ke halaman website atau aplikasi.
Terdapat dua bagian utama dari atribut data:
- Atribut name: yang harus terisi minimal satu karakter bertipe long, yang tidak menggunakan huruf kapital dan diawali dengan prefix 'data-'.
- Atribut value: dapat berupa tipe string apapun.
Sintak: <li data-book-author="Elfan Mauludi"> EL </li>
Contoh:
Ketika book di klik, maka akan diperlihatkan nama dari pengarang yang terpisah dari kotak dialog.
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(book)
{
var bookauthor = book.getAttribute("data-book-author");
alert(book.innerHTML
+ " is written by "
+ bookauthor
+ ".");
}
</script>
</head>
<body>
<h1>
Books
</h1>
<p>
Klik pada nama buku untuk mengetahui nama pengarang:
</p>
<ul>
<li
onclick="showDetails(this)"
id="elfan"
data-book-author="Elfan Mauludi">
Icha-icha Paradise
</li>
<li
onclick="showDetails(this)"
id="conquest_of_self"
data-book-author="Mahatma Gandhi">
Conquest of Self
</li>
<li
onclick="showDetails(this)"
id="broken_wings"
data-book-author="Sarojini Naidu">
Broken Wings
</li>
</ul>
</body>
</html>
Output:Books
Klik pada nama buku untuk mengetahui nama pengarang:
- Icha-icha Paradise
- Conquest of Self
- Broken Wings
Ketika book di klik, maka akan diperlihatkan nama dari pengarang yang terpisah dari kotak dialog.
HTML adalah bahasa markah yang digunakan untuk membangun struktur dasar sebuah halaman web. Sebagai bahasa yang berfungsi menyusun elemen-elemen dalam sebuah halaman, HTML memberikan berbagai atribut yang memungkinkan pengguna untuk menambahkan informasi atau pengaturan lebih lanjut pada elemen tersebut. Salah satu atribut yang cukup berguna dalam pengelolaan informasi tambahan pada elemen-elemen HTML adalah atribut data-*. Atribut ini memungkinkan pengguna untuk menyimpan data kustom yang bisa diakses dan digunakan dengan berbagai cara dalam halaman web.
Atribut data-*, yang juga dikenal sebagai atribut data khusus, diperkenalkan untuk memberikan kemudahan dalam menyimpan data tanpa harus memodifikasi struktur HTML yang sudah ada. Atribut ini memiliki format penamaan khusus yang dimulai dengan kata "data-" diikuti dengan nama atribut yang diinginkan. Penggunaan atribut ini sangat fleksibel karena memungkinkan setiap elemen HTML untuk membawa informasi tambahan yang spesifik tanpa mengganggu elemen-elemen lainnya dalam halaman web. Hal ini menjadi sangat berguna dalam pengembangan web yang dinamis, dimana data bisa diambil dan dimodifikasi sesuai kebutuhan tanpa harus memanipulasi elemen-elemen HTML secara langsung.
Baca Juga:
Dengan menggunakan atribut data-*, pengembang dapat menyematkan informasi tambahan pada elemen HTML tanpa mempengaruhi tampilan atau perilaku elemen tersebut secara langsung. Misalnya, dalam sebuah tabel yang menampilkan daftar produk, atribut data- dapat digunakan untuk menyimpan informasi tambahan mengenai harga, stok, atau kategori produk tersebut, yang kemudian dapat digunakan oleh skrip untuk menampilkan informasi lebih lanjut ketika pengguna berinteraksi dengan elemen tersebut. Karena atribut ini tidak mempengaruhi tampilan atau fungsionalitas langsung elemen tersebut, ia memberikan cara yang efisien untuk menyimpan informasi terkait yang bisa diakses oleh berbagai komponen aplikasi web.
Penerapan atribut data-ini sangat berguna dalam pengembangan aplikasi web modern, terutama ketika aplikasi tersebut membutuhkan interaksi dinamis dengan pengguna atau integrasi dengan sistem lain. Penggunaan atribut ini memudahkan pemrogram untuk menyimpan data terkait dengan elemen tanpa harus mengubah struktur HTML atau menggunakan penyimpanan eksternal seperti cookies atau sesi. Data yang disimpan dalam atribut data- biasanya berupa nilai string, tetapi dapat juga menyimpan informasi lainnya sesuai kebutuhan, seperti angka, tanggal, atau objek JSON yang kemudian diproses oleh skrip yang berjalan pada halaman web.
Salah satu keunggulan penggunaan atribut data- adalah kemampuannya untuk memberikan konteks lebih lanjut pada elemen HTML tanpa perlu merombak elemen-elemen lain. Pengguna dapat menambahkan informasi yang tidak terlihat atau tidak berpengaruh langsung pada antarmuka pengguna, tetapi tetap dapat diakses dan dimanfaatkan oleh perangkat lunak yang berjalan pada halaman tersebut. Dalam hal ini, atribut data- bertindak sebagai tempat penyimpanan data tambahan yang terikat pada elemen tersebut, memungkinkan pemrogram untuk menyimpan berbagai informasi yang relevan dengan cara yang lebih terstruktur dan terorganisir.
Dengan menggunakan atribut data- ini, pengembang tidak perlu membuat atribut kustom yang bisa berpotensi bertabrakan dengan atribut HTML standar yang sudah ada. Penamaan yang diawali dengan "data-" membuat atribut ini terpisah dari atribut standar HTML, sehingga tidak akan menimbulkan kebingungannya. Selain itu, penggunaan atribut data- ini juga memberikan fleksibilitas karena data yang disimpan dalam atribut ini bisa diakses menggunakan berbagai cara, baik melalui skrip JavaScript, perangkat pemrograman lain yang terintegrasi dengan halaman web, ataupun aplikasi yang mengolah data dari halaman tersebut.
Pada penerapan lebih lanjut, atribut data- juga dapat digunakan untuk meningkatkan pengalaman pengguna melalui interaksi dinamis pada halaman web. Misalnya, atribut ini memungkinkan elemen untuk menyimpan informasi yang akan digunakan saat suatu kejadian atau aksi tertentu terjadi, seperti ketika pengguna mengklik sebuah tombol atau mengarahkan kursor pada elemen tertentu. Atribut data- membantu skrip untuk bekerja lebih efisien dengan menyimpan informasi relevan langsung pada elemen yang bersangkutan, tanpa perlu mencari data tersebut di tempat lain. Hal ini membuat pemrograman aplikasi web menjadi lebih sederhana dan lebih terorganisir.
Selain itu, atribut data- juga sering digunakan dalam integrasi dengan teknologi lain, seperti sistem basis data atau perangkat lunak lain yang berhubungan dengan pengelolaan data. Penggunaan atribut data- ini memberikan cara yang efisien untuk menyimpan informasi terkait yang nantinya bisa diambil dan diproses lebih lanjut oleh sistem atau aplikasi yang mengakses halaman tersebut. Misalnya, ketika halaman web mengakses informasi produk dari basis data eksternal, atribut data- bisa digunakan untuk menyimpan ID produk atau kode unik lainnya yang berkaitan dengan produk tersebut, sehingga proses pengambilan dan pemrosesan data menjadi lebih mudah.
Penggunaan atribut data- juga dapat meningkatkan aksesibilitas aplikasi web dengan menyediakan cara bagi perangkat lunak atau alat bantu untuk mengakses informasi tambahan yang mungkin tidak terlihat oleh pengguna secara langsung, tetapi tetap penting untuk kelancaran operasional aplikasi. Sebagai contoh, pada aplikasi berbasis data, atribut data- dapat digunakan untuk menyimpan ID pelanggan atau informasi lainnya yang dibutuhkan untuk menjaga konsistensi antar berbagai elemen yang ada dalam aplikasi tersebut. Dengan demikian, atribut data- ini memungkinkan pemrogram untuk mengelola data dengan cara yang lebih mudah, terorganisir, dan efisien.
Dalam praktik pengembangan web, atribut data- memberikan banyak manfaat dalam hal fleksibilitas dan organisasi. Atribut ini tidak hanya menyederhanakan cara pengelolaan informasi tambahan, tetapi juga memudahkan integrasi antara elemen-elemen HTML dengan skrip atau perangkat lunak lainnya. Penggunaan atribut data- dalam pengembangan aplikasi web membantu menciptakan aplikasi yang lebih dinamis, interaktif, dan terorganisir, karena memberikan cara bagi elemen-elemen HTML untuk membawa informasi yang relevan dengan cara yang tidak mengganggu struktur atau tampilan halaman web. Oleh karena itu, atribut data- menjadi salah satu fitur penting yang harus dipahami dan dimanfaatkan dalam pengembangan aplikasi web modern.
Referensi Tambahan:
- 3 Nilai Utama Penggunaan Atribut Draggable pada HTML
- Cara Membuat Data Drag and Drop pada Atribut Dropzone HTML
- 3 Nilai Utama Penggunaan Atribut Enctype pada HTML
- 9 Elemen yang dapat Diterapkan Atribut Form HTML
- 2 Contoh Program Penggunaan Atribut For pada HTML
- 6 Cara Penerapan Atribut Height pada Elemen HTML
- Cara Menampilkan dan Menyembunyikan Elemen Menggunakan Atribut Hidden HTML
Artikel ini akan dibaca oleh: Regina Fonita, Renata Kania Novando, Rizatun Aisyah, Sofyan Nur Rokhim, dan Steven Jordan Alvaro Ramba.
5 komentar untuk "Kostum Atribut Data HTML Menggunakan Atribut Data-*"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa fungsi atribut data-* pada dokumen html?
BalasHapusAtribut data-* pada HTML digunakan untuk menyimpan data kostum pribadi pada halaman atau aplikasi berbasis html. Nama atribut tidak boleh mengandung huruf besar apapun, dan harus minimal memiliki satu karakter setelah awalan "data-" nilai atribut yang dapat berupa string apa pun.
HapusApa yang dimaksud dengan atribut pada html?
BalasHapusAtribuat pada html digunakan untuk memberikan informasi tambahan atau tambahan tertentu tentang suatu elemen. Semua elemen HTML dapat memiliki atribut.
HapusAtribut pada html memberikan informasi tambahan tentang suatu elemen yang biasanya membutuhkan dua parameter berupa nama dan nilai atau value. Setiap nama pada parameter atribut memiliki beberapa value yang harus ditulis dalam tanda kutip pada dokumen html.
Hapus