HTML <summary> Tag

The <summary> tag is used to define the visible header for the <details> element. By clicking on the header the user can view/hide the information.

The <summary> element always should be the first element inside <details> tag.

The <summary> tag is new to HTML5.

Syntax

The content of the tag is between the opening (<summary>) and closing (</summary>) tag.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Copyright 2013-2014.</summary>
      <p> W3docs. All rights reserved.</p>
      <p>The content of the website is the property of W3Docs.com.</p>
    </details>
  </body>
</html>

Result

Attributes

The <summary> tag supports Global Attributes and the Event Attributes.

Browser support

12+ 49+ 6+ 15+