Siap! Kita lanjut dengan dua "bonus" materi dasar HTML yang lumayan berguna ini: Atribut data-* dan elemen <details> & <summary>. Ini kayak nambahin sedikit "bumbu penyedap" ke skill HTML-mu.

HTML Lanjutan: Atribut data-* dan Elemen <details> & <summary>

Setelah menguasai fondasi HTML, ada beberapa fitur tambahan yang, meskipun mungkin gak dipake setiap hari, bisa sangat berguna di situasi tertentu. Dua di antaranya adalah atribut data-* untuk menyimpan data kustom dan pasangan elemen <details> & <summary> untuk membuat widget interaktif sederhana.

Atribut data-*: Menyimpan Data Kustom di Elemen HTML

Pernah gak sih kamu pengen nyimpen informasi tambahan di sebuah elemen HTML, tapi informasi itu gak ada hubungannya sama tampilan (jadi gak cocok ditaruh di class atau style) dan juga bukan id? Misalnya, kamu punya daftar produk dan pengen nyimpen ID produk atau harga asli (sebelum diskon) langsung di elemennya buat nanti diakses sama JavaScript.

Nah, di sinilah atribut data-* (Custom Data Attributes) berperan!

Apa itu Atribut data-*?

Atribut data-* adalah cara standar di HTML5 buat nyematin data kustom (data bikinan kita sendiri) ke elemen HTML, baik itu data privat buat halaman atau aplikasi kita. Data ini gak bakal ngaruh ke tampilan atau perilaku default elemen tersebut, tapi bisa dibaca dan dimanipulasi pake JavaScript, atau bahkan dipake di CSS (lewat fungsi attr()).

Aturan Penamaan Atribut data-*:

1. Nama atribut harus diawali dengan data- (wajib ada tanda hubung setelah "data").
2. Setelah data-, nama atributnya:
   • Tidak boleh mengandung huruf besar (uppercase).
   • Harus terdiri dari minimal satu karakter.
   • Boleh mengandung huruf, angka, tanda hubung (-), titik (.), titik dua (:), atau garis bawah (_).
   • (Tapi, biar gampang diakses JavaScript, biasanya orang pake format kebab-case, misal data-id-produk, data-user-role).

Contoh Penggunaan Atribut data-*:

<ul>
    <li data-animal="kucing" data-jumlah-kaki="4" data-suara="meong">Kucing Anggora</li>
    <li data-animal="burung" data-jumlah-kaki="2" data-suara="cuit" data-bisa-terbang="true">Burung Kenari</li>
    <li data-animal="ikan" data-jumlah-kaki="0" data-suara="blub" data-habitat="air">Ikan Koi</li>
</ul>
 
<div class="pengguna" data-id-user="12345" data-nama-lengkap="Budi Santoso" data-status-member="premium">
    Profil Pengguna
</div>

Di contoh di atas, kita nyimpen berbagai informasi tambahan langsung di elemen <li> dan <div>.

Mengakses Atribut data-* dengan JavaScript:

Ini salah satu kegunaan utama atribut data-*. Kamu bisa dengan mudah ngambil nilainya pake JavaScript lewat properti dataset pada objek elemen DOM.

Kalau nama atribut data-* kamu pake tanda hubung (kebab-case), misal data-id-produk, di JavaScript dia bakal diubah jadi camelCase: idProduk.

<div id="produkSaya" data-id-produk="P001" data-nama-barang="Laptop Super Cepat" data-harga-normal="15000000">
    Laptop Keren
</div>
 
<script>
    const produk = document.getElementById('produkSaya');
 
    console.log(produk.dataset.idProduk);     // Output: "P001"
    console.log(produk.dataset.namaBarang);   // Output: "Laptop Super Cepat"
    console.log(produk.dataset.hargaNormal);  // Output: "15000000" (selalu string)
 
    // Kamu juga bisa ngeset nilai baru
    produk.dataset.stokTersedia = "10";
    console.log(produk.dataset.stokTersedia); // Output: "10"
    // Ini akan menambahkan atribut data-stok-tersedia="10" ke elemen div di HTML
</script>

Penting: Nilai dari dataset itu selalu berupa string. Kalau kamu nyimpen angka dan mau dipake buat kalkulasi di JavaScript, jangan lupa di-convert dulu (misal, pake parseInt() atau parseFloat()).

Menggunakan Atribut data-* di CSS:

Kamu juga bisa ngakses nilai atribut data-* di CSS pake fungsi attr(), biasanya dipake bareng pseudo-elements ::before atau ::after.

<style>
    .item-info::after {
        content: " (Stok: " attr(data-stok) ")"; /* Menampilkan nilai data-stok */
        color: blue;
    }
</style>
 
<p class="item-info" data-stok="15">Barang A</p>
<p class="item-info" data-stok="Habis">Barang B</p>

Ini bisa berguna buat nampilin informasi tambahan secara visual tanpa perlu JavaScript.

Kapan Pakai data-*?

• Pas kamu butuh nyimpen metadata atau state sederhana yang spesifik buat elemen itu dan bakal dipake sama JavaScript.
• Buat "cantolan" data yang gak cocok ditaruh di id atau class.

Kapan Hindari data-*?

• Jangan pake data-* buat nyimpen data yang seharusnya keliatan sama pengguna dan punya makna semantik (misal, tanggal publikasi artikel, lebih baik pake <time>). Atribut data-* itu buat data "di balik layar".
• Jangan jadiin data-* pengganti class buat styling umum.

Atribut data-* ini fleksibel banget dan jadi alat yang berguna di toolbox HTML/JavaScript-mu.

Elemen <details> dan <summary>: Bikin Widget Interaktif Sederhana

Pengen bikin bagian konten yang bisa dibuka-tutup (kayak FAQ, atau spoiler) tanpa perlu nulis kode JavaScript sedikitpun? HTML5 punya solusinya: elemen <details> dan <summary>!

• <details>: Elemen pembungkus utama. Konten di dalem <details> (selain <summary>) bakal tersembunyi secara default.
• <summary>: Ini adalah judul atau label yang selalu keliatan buat elemen <details>. Kalau diklik, dia bakal nge-toggle (nampilin/nyembunyiin) sisa konten di dalem <details>.
  • Elemen <summary> harus jadi anak pertama dari elemen <details>.
  • Kalau kamu gak nyantumin <summary>, browser biasanya bakal nampilin teks default kayak "Details".

Contoh Penggunaan <details> dan <summary>:

<h2>Pertanyaan yang Sering Diajukan (FAQ)</h2>
 
<details>
    <summary>Apa itu HTML?</summary>
    <p>HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web dan aplikasi web.</p>
    <p>HTML menggambarkan struktur halaman web secara semantik beserta isyarat awal untuk presentasi/tampilan.</p>
</details>
 
<details>
    <summary>Apakah HTML sulit dipelajari?</summary>
    <p>Untuk dasarnya, HTML relatif mudah dipelajari karena sintaksnya yang sederhana dan lugas. Banyak orang bisa membuat halaman sederhana dalam beberapa jam.</p>
    <p>Namun, untuk menguasai HTML secara mendalam, termasuk aspek semantik, aksesibilitas, dan integrasinya dengan CSS & JavaScript, tentu membutuhkan waktu dan latihan.</p>
</details>
 
<details open> <!-- Atribut 'open' bikin dia kebuka default -->
    <summary>Alat apa saja yang dibutuhkan untuk mulai belajar HTML?</summary>
    <p>Kamu hanya butuh dua hal utama:</p>
    <ul>
        <li>Teks Editor (misalnya VS Code, Sublime Text, Notepad++, atau bahkan Notepad bawaan OS).</li>
        <li>Browser Web (misalnya Chrome, Firefox, Edge, Safari).</li>
    </ul>
</details>

Kalau kamu jalanin kode di atas, kamu bakal liat daftar pertanyaan. Pas kamu klik salah satu pertanyaan (teks di <summary>), jawaban atau detailnya bakal muncul atau tersembunyi. Simpel banget kan?

Atribut open pada <details>: Kalau kamu pengen salah satu widget <details> itu udah kebuka secara default pas halaman dimuat, tambahin aja atribut boolean open ke tag <details>-nya.

Styling <details> dan <summary>: Kamu bisa ngasih style ke <details> dan <summary> pake CSS kayak elemen HTML lainnya. Browser juga biasanya nambahin ikon segitiga kecil (marker) di sebelah <summary> yang nunjukin status kebuka/ketutup. Kamu bisa ngilangin atau ngubah marker ini pake CSS (properti list-style pada <summary> atau properti ::-webkit-details-marker / ::marker yang lebih spesifik, tergantung browser).

/* Contoh styling sederhana */
details {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}
 
summary {
    background-color: #f0f0f0;
    padding: 10px;
    cursor: pointer; /* Biar keliatan bisa diklik */
    font-weight: bold;
    outline: none; /* Hilangin outline default pas fokus (opsional) */
}
 
details[open] > summary { /* Style summary pas details lagi kebuka */
    background-color: #e0e0e0;
}
 
details > p, details > ul {
    padding: 10px;
}

Elemen <details> dan <summary> ini solusi yang elegan dan aksesibel buat bikin UI disclosure widget sederhana tanpa ketergantungan sama JavaScript.

Nah, itu dia dua fitur "bonus" HTML yang bisa nambahin fleksibilitas dan interaktivitas sederhana ke halaman web-mu. Atribut data-* bakal sering kepake pas kamu mulai main JavaScript, dan <details>/<summary> bisa jadi solusi cepat buat UI tertentu.

Dengan ini, kita bener-bener udah di ujung pembahasan materi HTML yang fundamental dan beberapa tambahannya. Kamu udah punya modal yang kuat banget!