HTML <details> Tag
➔ The <details> tag specifies additional details that the user can open as needed, which are usually closed initially.
➔ It creates a disclosure widget where the information is visible only when the widget is toggled to an "open" state.
➔ A disclosure widget is usually presented onscreen using a small triangle or an arrow that rotates to indicate open / closed position.
The details tag syntax
<details>
<summary>Label to click to see more details</summary>
<p>The content details is hidden by default.</p>
<ul>
<li>Content goes ....</li>
<li>More contents goes here...</li>
</ul>
</details>
Key aspects and best practices
➔ The details tag is an interactive and semantic element, but developers don't need any scripting like JavaScript to create this interaction.
➔ The detail tag works in collaboration with the summary tag, the summary tag shows a title or a label where the user can click to toggle the details.
➔ The content within the summary and details tags will be used as collapsible content.
The details tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML details tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>HTML details tag example</h3>
<details>
<summary>Label to click to see more details</summary>
<p>The content details is hidden by default.</p>
<ul>
<li>Content goes ....</li>
<li>More contents goes here...</li>
</ul>
</details>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Key Features and Characteristics
➔ openattribute: The open attribute contains a boolean value that the disclosure should open by default. And change its state on subsequent clicks.
➔ nameattribute: If multiple details tags share a common name attribute, opening any one of them ensures that all others will be closed.
➔ Screen readers and assistive technology can recognize and understand the state and purpose of the element and users can navigate accordingly.
➔ Developers can customize the style of elements such as colors, borders, triangular markers, etc. using CSS.
➔ The multiple details tag with style example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML details tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
summary::marker {
content: "★ ";
}
details[open]>summary::marker {
content: "\25BC";
color: red;
}
</style>
</head>
<body>
<h3>HTML multiple details tag with sytle example</h3>
<details name='faq'>
<summary>Label1 to click to see more details</summary>
<p>The content1 details is hidden by default.</p>
<ul>
<li>Content goes ....</li>
<li>More contents goes here...</li>
</ul>
</details>
<details name='faq'>
<summary>Label2 to click to see more details</summary>
<p>The content2 details is hidden by default.</p>
<ul>
<li>Content goes ....</li>
<li>More contents goes here...</li>
</ul>
</details>
<details name='faq'>
<summary>Label3 to click to see more details</summary>
<p>The content3 details is hidden by default.</p>
<ul>
<li>Content goes ....</li>
<li>More contents goes here...</li>
</ul>
</details>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Common use
➔ Frequently Asked Questions or FAQs can be listed where users can find answers to the most common questions.
➔ Any content that requires additional information can use the detail tag, only interested users may find it useful.
➔ Product information or user instructions can also be presented through see more, read details, etc. However, information that is extremely important and should be clearly known to the user should not be presented in a collapsible style but should be presented in a clear and easy way to the user.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
open |
open | Specifies that the details should be visible.(Don't use open="false" it still makes the details visible.) |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<details>
<summary>show details</summary>
<p>The details tag specifies additional details that the user can open as needed, which are usually closed
initially. It creates a disclosure widget where the information is visible only when the widget is toggled to an
"open" state.
</p>
</details>
Click on the "Try it Now" button to see how it works.