HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <details> Tag


The <details> tag in HTML is used to specify content that the user can open and close on demand. It’s a way to organize information in a collapsible format, allowing users to view or hide additional details as needed. This can be particularly useful for FAQs, product descriptions, or any content that benefits from a toggleable display.


Example 1: Basic Usage of <details> Tag

Here’s a simple example of how you can use the <details> tag to create a collapsible section:

  <summary>Click to view more details</summary>
  <p>This is the content inside the details tag. You can put any sort of content here.</p>

Example 2: Styling <details> and <summary> with CSS

You can also style the <details> and <summary> tags using CSS to create a more visually appealing collapsible section:

  <summary style="font-weight: bold;">Click to view more details</summary>
  <p style="color: blue;">This content is styled with CSS.</p>

Try it out below

Sponsored by Google

powered by Advanced iFrame. Get the Pro version on CodeCanyon.


  • open: Specifies that the details should be visible (open) to the user.
  • Global Attributes: The <details> tag supports all the global attributes in HTML.
  • Event Attributes: The <details> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <details> element with the following default CSS settings:

details {
  display: block;


The <details> tag offers a convenient way to present information in a collapsible format, enhancing the user experience by allowing control over content visibility.

It’s a versatile tag that can be used in various contexts, from FAQs to product descriptions, and can be styled with CSS to match the overall design of the webpage.