HTML5 <details> Tag

The HTML <details> tag is used as a disclosure widget from which the user can retrieve additional information.

The only content permitted inside this element is one <summary> element followed by flow content. Both the starting and ending tags are mandatory for this element. The parent of the <details> tag can be any element that accepts flow content.

The following style is applied to this element by default:

details {
  display: block;
}

Here is an example of using this tag:

<details>
  <summary>Examination Result: Passed</summary>
  <ul>
  <li>Maths : 95/100</li>
  <li>Physics: 88/100</li>
  <li>Chemistry: 55/100</li>
  <li>English: 80/100</li>
  </ul>
</details>

Attributes

open

This Boolean attribute is used to indicate whether the details will be shown to the user on page load. The default value is false and so details will be hidden.

Examples

See the Pen HTML details Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <details> element on MDN.
  2. You can also read the HTML <details> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top