Learning HTML - Modern Interactive Elements
This episode breaks down modern interactive elements: details and summary for JavaScript-free accordions, and dialog for accessible modals using showModal and close.
#Introduction
Some interactivity can be achieved purely with HTML — without a single line of JavaScript. Episode 15 covers modern interactive elements: details and summary for accordions and expandable info bars, and dialog for accessible modals.
These two elements were born from interaction patterns that used to be written manually with JavaScript. Now browsers provide more reliable built-in behavior: focus is handled, Escape works, and screen readers recognize their roles — as long as you use them correctly.
#details and summary
#A JavaScript-Free Accordion
details marks expandable content, and summary is the visible title:
<details>
<summary>Apakah HTML bisa dipakai tanpa CSS?</summary>
<p>Bisa. HTML tetap menampilkan konten yang terstruktur, hanya tanpa gaya visual.</p>
</details>The browser provides the built-in toggle: click summary to open or close the content. No JavaScript is needed at all.
#The open Attribute
By default the content is closed. Add the open attribute to have it open when the page loads:
<details open>
<summary>Bagian yang langsung terbuka</summary>
<p>Konten ini sudah terlihat sejak halaman dimuat.</p>
</details>The open attribute is a boolean attribute — its mere presence is enough.
#An Explorable FAQ Group
Combine several details elements for a question-and-answer page. Users can open them one at a time and read in sequence — a comfortable pattern on mobile devices.
#The dialog Element
#An Accessible Modal
dialog creates a modal window with built-in behavior: focus moves into the dialog, clicking outside doesn't close it accidentally, and the Escape key closes it.
<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>Without the open attribute, the dialog is hidden. To show it, call the showModal method from 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");
});Calling dialog.showModal(), not show(), makes the dialog modal — the background can't be interacted with until the dialog closes.
#Closing with form method=dialog
The neatest pattern for a dialog containing a form: method="dialog" closes the dialog when the submit button is pressed:
<dialog id="dialog-pesan">
<form method="dialog">
<p>Pesan berhasil dikirim.</p>
<button type="submit">Tutup</button>
</form>
</dialog>With form method="dialog", the submit button automatically closes the dialog without extra JavaScript.
#Common Mistakes and Solutions
#A Dialog Without a Close Button
A dialog with no way to close besides Escape confuses users. Always provide a cancel or close button inside the dialog.
#details for Main Content
details hides content behind a click — don't use it for main content that must be read immediately. Use it for supplements like FAQs and additional notes.
#Exercise: FAQ and Modal
Combine details and dialog in one page:
<!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>Fill in 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());Run the server with python3 -m http.server 8080, open the page, and try both patterns. Notice how Escape closes the dialog — that's built-in browser behavior.
#Closing
Episode 15 adds interactivity without complex JavaScript: details and summary for expandable content, plus dialog with showModal, form method="dialog", and built-in focus handling.
Key takeaways:
detailsandsummarycreate a JavaScript-free accordion.openopens content from page load.dialogshows a modal;showModalactivates modal mode.form method="dialog"closes the dialog on submit without scripts.- Always provide a button to close a dialog.
In the next episode, episode 16, we'll cover data and document metadata — the meta element, viewport, charset, description, Open Graph, and favicon that make up a complete document head.