Belajar HTML - Elemen Interaktif Modern
Episode ini membedah elemen interaktif modern: details dan summary untuk akordeon tanpa JavaScript, serta dialog untuk modal yang dapat diakses dengan showModal dan close.
#Pendahuluan
Sebagian interaktivitas bisa dicapai murni dengan HTML — tanpa satu baris pun JavaScript. Episode 15 membahas elemen interaktif modern: details dan summary untuk akordeon serta bilah info yang bisa dibuka, dan dialog untuk modal yang dapat diakses.
Kedua elemen ini lahir dari pola interaksi yang tadinya harus ditulis manual dengan JavaScript. Kini browser menyediakan perilaku bawaan yang lebih andal: fokus tertangani, escape berfungsi, dan screen reader mengenali perannya — selama kalian memakainya dengan benar.
#details dan summary
#Akordeon Tanpa JavaScript
details menandai konten yang bisa diperluas, dan summary adalah judul yang terlihat:
<details>
<summary>Apakah HTML bisa dipakai tanpa CSS?</summary>
<p>Bisa. HTML tetap menampilkan konten yang terstruktur, hanya tanpa gaya visual.</p>
</details>Browser menyediakan tombol pengatur bawaan: klik summary untuk membuka atau menutup konten. Tidak perlu JavaScript sama sekali.
#Atribut open
Secara default konten tertutup. Tambahkan atribut open agar terbuka saat halaman dimuat:
<details open>
<summary>Bagian yang langsung terbuka</summary>
<p>Konten ini sudah terlihat sejak halaman dimuat.</p>
</details>Atribut open adalah atribut boolean — kehadirannya saja sudah cukup.
#Kelompok FAQ yang Bisa Dieksplorasi
Kombinasikan beberapa details untuk halaman tanya jawab. Pengguna bisa membuka satu per satu dan membacanya berurutan — pola yang nyaman di perangkat mobile.
#Elemen dialog
#Modal yang Dapat Diakses
dialog menciptakan jendela modal dengan perilaku bawaan: fokus berpindah ke dalam dialog, klik di luar tidak menutupnya secara tak sengaja, dan tombol Escape menutupnya.
<dialog id="dialog-konfirmasi">
<p>Apakah kalian yakin ingin melanjutkan?</p>
<button type="button" id="ya">Ya, lanjutkan</button>
<button type="button" id="batal">Batal</button>
</dialog>
<button type="button" id="buka-dialog">Buka Dialog</button>Tanpa atribut open, dialog tersembunyi. Untuk menampilkannya, panggil metode showModal lewat JavaScript:
const dialog = document.getElementById("dialog-konfirmasi");
const buka = document.getElementById("buka-dialog");
buka.addEventListener("click", () => {
dialog.showModal();
});
dialog.addEventListener("close", () => {
console.log("Dialog ditutup");
});Perintah dialog.showModal(), bukan show(), membuat dialog modal — latar belakang tidak bisa diinteraksikan sampai dialog ditutup.
#Menutup dengan form method=dialog
Pola paling rapi untuk dialog yang berisi form: method="dialog" menutup dialog saat tombol submit ditekan:
<dialog id="dialog-pesan">
<form method="dialog">
<p>Pesan berhasil dikirim.</p>
<button type="submit">Tutup</button>
</form>
</dialog>Dengan form method="dialog", tombol submit otomatis menutup dialog tanpa JavaScript tambahan.
#Kesalahan Umum dan Solusinya
#Dialog Tanpa Tombol Tutup
Dialog yang tidak punya cara menutup selain Escape membingungkan pengguna. Selalu sediakan tombol batal atau tutup di dalam dialog.
#details untuk Konten Utama
details menyembunyikan konten di balik klik — jangan dipakai untuk konten utama yang harus langsung terbaca. Gunakan untuk pelengkap seperti FAQ dan keterangan tambahan.
#Latihan: FAQ dan Modal
Gabungkan details dan dialog dalam satu halaman:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tanya Jawab</title>
<script defer src="js/faq.js"></script>
</head>
<body>
<h1>Tanya Jawab</h1>
<details>
<summary>Apa itu elemen details?</summary>
<p>Elemen yang kontennya bisa diperluas dan ditutup tanpa JavaScript.</p>
</details>
<details>
<summary>Bagaimana membuka dialog?</summary>
<p>Panggil metode showModal lewat JavaScript atau dengan form method dialog.</p>
</details>
<button type="button" id="buka-dialog">Tampilkan Peringatan</button>
<dialog id="dialog-peringatan">
<p>Halaman ini memakai elemen interaktif modern.</p>
<button type="button" id="tutup-dialog">Tutup</button>
</dialog>
</body>
</html>Isi js/faq.js:
const dialog = document.getElementById("dialog-peringatan");
const buka = document.getElementById("buka-dialog");
const tutup = document.getElementById("tutup-dialog");
buka.addEventListener("click", () => dialog.showModal());
tutup.addEventListener("click", () => dialog.close());Jalankan server dengan python3 -m http.server 8080, buka halaman, dan coba kedua pola. Perhatikan bagaimana Escape menutup dialog — itu perilaku bawaan browser.
#Penutup
Episode 15 menambah interaktivitas tanpa JavaScript yang rumit: details dan summary untuk konten yang bisa dibuka, serta dialog dengan showModal, form method="dialog", dan penanganan fokus bawaan.
Inti yang harus dibawa pulang:
detailsdansummarymembuat akordeon tanpa JavaScript.openmembuka konten sejak halaman dimuat.dialogmenampilkan modal;showModalmengaktifkan mode modal.form method="dialog"menutup dialog saat submit tanpa skrip.- Selalu sediakan tombol untuk menutup dialog.
Di episode 16 selanjutnya kita akan membahas data dan metadata dokumentasi — elemen meta, viewport, charset, deskripsi, Open Graph, dan favicon yang membentuk kepala dokumen yang lengkap.