The <details> tag in HTML is used to create a disclosure widget from which the user can view or hide additional information. It is used with the <summary>
tag, which provides the title or header for the details section. It’s generally used for FAQs, dropdown menus, or to show/hide additional content.
HTML
<!DOCTYPE html>
<html>
<body>
<details>
<summary>
GeeksforGeeks
</summary>
<p>
A computer science portal for geeks
</p>
<div>
It is a computer science portal
where you can learn programming.
</div>
</details>
</body>
</html>
Syntax
<details>
<summary>Click to view </summary>
<p> Additional content that can be shown or hidden.</p>
</details>
Attribute
- details open: The detail tag has an attribute called open which is used to display the hidden information by default.
Event
- toggle event: It’s a feature allowing hiding or showing extra information by interaction with the summary in HTML details.
<details> tag with open attriute
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Frequently Asked Questions</h1>
<details open>
<summary>
What is the purpose of the <code><details></code> tag?
</summary>
<p>
The <code><details></code> tag is used to create a
disclosure widget that the user can open and close to
reveal or hide additional content.
</p>
</details>
<details>
<summary>
How does the <code><summary></code>
tag work?
</summary>
<p>
The <code><summary></code> tag provides a heading
for the content within the <code><details></code>
element, and it is always visible to the user.
</p>
</details>
<details>
<summary>
Can I style the <code><details></code>
and <code><summary></code> tags?
</summary>
<p>
Yes, you can use CSS to style both the
<code><details></code> and
<code><summary></code> tags to
match your website's design.
</p>
</details>
</body>
</html>
HTML5 <details> Tag – FAQs
What is the default state of the <details> tag when a page loads?
By default, the <details> tag is collapsed when the page loads. You can make it open by default using the open attribute.
Can you nest multiple <details> tags?
Yes, you can nest multiple <details> tags inside one another to create nested toggle sections or expandable lists.
What content can be included inside the <details> tag?
The <details> tag can contain any HTML elements, such as paragraphs, images, links, lists, and even other interactive elements.
Can the <details> tag be used in forms?
Yes, you can use the <details> tag within forms to show or hide additional form fields or information based on user interaction.
How do search engines treat hidden content within a <details> tag?
Hidden content within a <details> tag is typically indexed by search engines, as long as the content is relevant and follows SEO best practices.