Syntax
<details>
<summary>Click to expand</summary>
<p>Hidden content</p>
</details>Examples
Basic Collapsible Section
A simple expandable/collapsible content block.
<details>
<summary>What is HTML?</summary>
<p>HTML is the standard markup language for creating web pages.</p>
</details>FAQ Accordion
Multiple details elements used to build an FAQ section.
<details>
<summary>Is Codectionary free?</summary>
<p>Yes, all core learning content is free.</p>
</details>
<details>
<summary>Do I need an account?</summary>
<p>An account is needed to save progress and take quizzes.</p>
</details>Open by Default
Using the open attribute so the content starts expanded.
<details open>
<summary>Important Notice</summary>
<p>This section is expanded by default when the page loads.</p>
</details>Attributes
- open (boolean): Shows the details content expanded by default
Best practices
- Use <details>/<summary> for simple show/hide UI instead of building the same thing manually with JavaScript and ARIA attributes
- Always include a <summary> — without one, browsers show a generic default label
- Style the disclosure triangle with the ::marker pseudo-element rather than hiding it and building a custom one, when possible
- Great fit for FAQs, changelogs, and "read more" sections
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
HTML Forms
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<a>
The <a> (anchor) element creates hyperlinks that allow users to navigate between pages, sections, or external resources. Links are fundamental to the web, enabling the interconnected nature of websites. The href attribute specifies the destination, while the link text tells users what to expect when they click.<dialog>
The <dialog> element represents a native modal or non-modal dialog box, such as a confirmation prompt, settings panel, or alert. It comes with built-in modal behavior (via the showModal() JavaScript method) including a backdrop and focus trapping, removing the need to hand-build accessible modal logic from scratch.<progress>, <meter>
These two elements display quantities visually without needing custom-built progress bars. <progress> represents the completion progress of a task, like a file upload or multi-step form. <meter> represents a scalar value within a known range, like disk usage or a rating — it is for measuring a static value, not tracking progress toward completion.
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<a>
The <a> (anchor) element creates hyperlinks that allow users to navigate between pages, sections, or external resources. Links are fundamental to the web, enabling the interconnected nature of websites. The href attribute specifies the destination, while the link text tells users what to expect when they click.<dialog>
The <dialog> element represents a native modal or non-modal dialog box, such as a confirmation prompt, settings panel, or alert. It comes with built-in modal behavior (via the showModal() JavaScript method) including a backdrop and focus trapping, removing the need to hand-build accessible modal logic from scratch.<progress>, <meter>
These two elements display quantities visually without needing custom-built progress bars. <progress> represents the completion progress of a task, like a file upload or multi-step form. <meter> represents a scalar value within a known range, like disk usage or a rating — it is for measuring a static value, not tracking progress toward completion.