Small interactions can make a webpage easier to use: opening a tip, changing a setting, or reusing an interface component.
What You Need to Know
Built-in HTML controls can solve common interface tasks with less JavaScript. Prefer details for disclosure and native form controls for inputs instead of recreating their behavior unnecessarily.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<details>
<summary>Frequently asked question</summary>
<p>Use semantic HTML first when it already provides the needed interaction.</p>
</details>
<button type="button" popovertarget="extra-help">Extra help</button>
<div id="extra-help" popover>
<p>Native browser interactions can reduce custom JavaScript.</p>
</div>Let’s Read the Code
- <details>: Details makes a section expandable without requiring a custom script.
- <summary>: Summary is the label people activate to expand or collapse details.
- type: Type changes what sort of control or resource the browser uses.
- popovertarget: Popovertarget connects a trigger button to a popover by ID.
What the example shows: Details and popover can provide common interactions without writing a click handler.
What Happens in the Browser?
When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.
Start with native behavior. Details, dialog, and popover each solve a different interface problem. Choose the simplest control that actually matches what a visitor wants to do, then test focus and dismissal as well as appearance.
Your Turn
Compare the native details element with a custom accordion built from a div.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- Extra JavaScript is not automatically better if it makes the page harder to maintain or use.
Key Takeaways
- Built-in HTML controls can solve common interface tasks with less JavaScript.
- <details>: Details makes a section expandable without requiring a custom script.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.