Open In App

HTML details Tag

Last Updated : 28 Nov, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

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>&lt;details&gt;</code> tag?
    </summary>
    <p>
      The <code>&lt;details&gt;</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>&lt;summary&gt;</code>
      tag work?
    </summary>
    <p>
      The <code>&lt;summary&gt;</code> tag provides a heading
      for the content within the <code>&lt;details&gt;</code>
      element, and it is always visible to the user.
    </p>
  </details>

  <details>
    <summary>
      Can I style the <code>&lt;details&gt;</code>
      and <code>&lt;summary&gt;</code> tags?
    </summary>
    <p>
      Yes, you can use CSS to style both the
      <code>&lt;details&gt;</code> and
      <code>&lt;summary&gt;</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.


Next Article

Similar Reads

three90RightbarBannerImg
  翻译: