RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html5-details-tag/ below:

HTML details Tag - GeeksforGeeks

HTML details Tag

Last Updated : 11 Jul, 2025

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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4