HTML Interactive Elements

Build accordions, FAQs, popups and progress bars with plain HTML.

Lesson 42 of 44Intermediate13 min read

Some interactive widgets are built right into HTML. <details> gives you an expandable section, <dialog> gives you a proper pop-up window, and <progress> and <meter> draw bars. All of them work with the keyboard and screen readers without any extra effort.

Developers used to build these widgets from <div> elements and a lot of JavaScript, and the results were often hard to use with a keyboard. Using the native elements means less code to write, fewer bugs and better accessibility. It's a good example of why it pays to know what HTML can already do before reaching for JavaScript.

details and summary: accordions without JavaScript

HTML
<details>
  <summary>What's in the box?</summary>
  <p>A charger, a cable and a sticker.</p>
</details>
  • <summary> is the heading that is always visible. Clicking it opens and closes the section.
  • Everything else inside <details> is hidden until the section is opened.
  • Add the open attribute to start with the section expanded.
  • Give several <details> elements the same name and only one can be open at a time, creating an exclusive accordion.

This pattern suits FAQs, "show more" sections and long lists of settings, where most visitors only need part of the content.

dialog: native pop-up windows

<dialog> creates a pop-up box. To open it as a modal, which dims the rest of the page and keeps keyboard focus inside the box, you need one line of JavaScript:

JavaScript
document.querySelector('dialog').showModal();

A <form method="dialog"> inside the dialog closes it when submitted, and pressing Esc closes it automatically.

Use dialogs for things that need an answer before the visitor carries on, such as "Delete this file?". For information that can wait, a message on the page is less disruptive.

progress and meter bars

  • <progress value="70" max="100"> shows how far a task has got, such as an upload or the steps of a checkout.
  • <meter value="0.8"> shows a measurement within a known range, such as disk space used or password strength. With the low, high and optimum attributes it can change colour to signal a good or bad value.

Both elements are understood by screen readers, which announce the value as a percentage or a number.

HTML Interactive Elements Syntax

Interactive elements

<details><summary>Question</summary> Answer </details>
<dialog id="d"> … </dialog>
<progress value="3" max="10"></progress>
<meter value="0.6" min="0" max="1"></meter>

HTML Interactive Elements Summary

  • <details> and <summary> create expandable sections without JavaScript.
  • Sharing a name between <details> elements makes an exclusive accordion.
  • <dialog> creates a pop-up; showModal() opens it as a modal.
  • <progress> shows task progress and <meter> shows a value within a range.
  • Native elements are more accessible than widgets built from <div> elements.

HTML Interactive Elements Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

An FAQ accordion

Click the questions. The name attribute makes it exclusive: opening one closes the others.

<h3>FAQ</h3>
<details name="faq" open>
  <summary>Do you deliver on weekends?</summary>
  <p>Yes! Saturday and Sunday, 9am to 1pm.</p>
</details>
<details name="faq">
  <summary>Can I change my order?</summary>
  <p>Up to two hours before delivery.</p>
</details>
<details name="faq">
  <summary>Is the packaging recyclable?</summary>
  <p>100%, including the tape.</p>
</details>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2open makes the first question start expanded.
  2. Line 3The summary is the clickable label.
  3. Lines 6 to 9Every <details> shares name="faq", which groups them into an exclusive accordion.
Example 2

A modal dialog

<button type="button" id="open">Delete photo</button>

<dialog id="confirm">
  <h3>Delete this photo?</h3>
  <p>This can't be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="delete">Delete</button>
  </form>
</dialog>

<p id="result"></p>

<script>
  const dialog = document.getElementById("confirm");
  document.getElementById("open").addEventListener("click", () => dialog.showModal());
  dialog.addEventListener("close", () => {
    document.getElementById("result").textContent = "You chose: " + dialog.returnValue;
  });
</script>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 3 to 10The dialog is hidden until opened.
  2. Lines 6 to 9A method="dialog" form closes the dialog; the clicked button's value becomes returnValue.
  3. Line 16showModal() opens it as a modal and dims the page behind.
  4. Lines 17 to 19When it closes, we show which button was chosen.
Example 3

Progress and meter

<p>Course progress: <progress value="7" max="12">7 of 12</progress> 7 / 12 lessons</p>
<p>Storage used: <meter value="0.92" low="0.5" high="0.8" optimum="0.2">92%</meter> 92%</p>
<p>Password strength: <meter value="0.3" low="0.4" high="0.7" optimum="1">weak</meter> weak</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1<progress> shows completion of a task.
  2. Line 2The meter turns warning-coloured because 0.92 is above high and far from optimum.
  3. Line 3A low value when the optimum is high also shows as poor.

Common HTML Interactive Elements Mistakes

Building an accordion with divs

Don't
<div class="q" onclick="toggle()">Question</div>
<div class="a" style="display:none">Answer</div>
Do
<details>
  <summary>Question</summary>
  <p>Answer</p>
</details>

The native version works with the keyboard, is announced properly and needs no JavaScript.

Using show() when you want a modal

Don't
<script> dialog.show(); </script>
Do
<script> dialog.showModal(); </script>

show() opens a non-modal dialog. The rest of the page stays clickable and Esc doesn't close it.

HTML Interactive Elements in Real Projects

Native widgets are winning

For years, every site used heavy JavaScript libraries for accordions and modals. Today, <details> and <dialog> handle focus, keyboard support and accessibility for you. Many design systems now build their components on top of these native elements.

HTML Interactive Elements Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the accordion.

<>
  <>Shipping info</summary>
  <p>Free over £30.</p>
</details>
Multiple choicemedium

How do you make a <details> start expanded?

Multiple choicemedium

Which method opens a dialog as a modal?

Fix the bugmedium

The progress bar should show 3 out of 5 steps, and the FAQ answer should be hidden behind a clickable summary. Fix both.

<progress value="3"></progress>
<details>
  <p>Where are you based?</p>
  <p>Glasgow, Scotland.</p>
</details>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • progress max is 5
  • details has a summary with the question

HTML Interactive Elements Quiz

3 questions to check what you learned.

  1. Which element is the clickable heading of a <details> element?

    • <legend>
    • <caption>
    • <title>
    • <summary>

  2. What does <form method="dialog"> do inside a dialog?

    • Sends data to the server
    • Opens another dialog
    • Nothing
    • Closes the dialog and sets its returnValue

  3. Which element is best for "disk 90% full"?

    • <progress>
    • <range>
    • <meter>
    • <bar>

HTML Interactive Elements Challenge

Build a two-question FAQ

Create two <details> elements that:

  1. Both share name="help"
  2. Each have a <summary> question and a <p> answer
  3. The first one starts open
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Two details named "help"
  • Each has a summary and a paragraph
  • Only the first starts open

Related HTML topics

38AccessibilityBuild pages everyone can use, including screen-reader and keyboard users.19FormsCollect information from visitors with accessible, well-labelled forms.36EventsReact to clicks, typing, form submits and key presses.
Esc
↑↓ to navigateEnter to open