HTML <details> Tag

The <details> tag contains additional details, that the user can open and view. By default, the content of the tag is not shown. In order to display the contents, you must apply the open attribute.

The <summary> sets the visible title, which, when clicked, will open/close additional information. If there is no header, then by default the browser will show the header "More details".

Syntax

The <details> tag comes in pairs, the content is written between the opening (<details>) and the closing (</details>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>

Result

Attributes

Attribute Value Description
open open Indicates that the information in the tag should initially be shown in expanded form.

The <details> tag also supports the Global Attributes and the Event Attributes.

Browser support

12+ 49+ 6+ 15+