W3docs
en
Log in

HTML <summary> Tag

<summary> tag defines the visible header for the tag <details>.Description, syntax, attributes and examples.

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 should always be the first element inside a <details> tag. When you click on the summary, the parent <details> element is switched open or closed. Then the toggle event is sent to <details>, which can be used to inform you when the state change occurs. You can listen for this event with JavaScript:

document.querySelector('details').addEventListener('toggle', (e) => {
  console.log('Details is now', e.target.open ? 'open' : 'closed');
});

If the first child of the <details> element isn’t a <summary> element, a default string will be used as a label of the disclosure box.

The default style for <summary> tags contains the CSS display property with the “list-item” value allowing to change the icon that is displayed as a disclosure widget. If you want to remove the disclosure triangle, you can use display: block.

The <summary> tag is one of the HTML5 elements.

Syntax

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

Example of the HTML <summary> tag:

HTML <summary> tag

<!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>
Try it Yourself »

Result

summary example

Attributes

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

How to style an HTML <summary> tag

summary {
  color: blue;
  list-style: none; /* Hides the disclosure triangle */
}

Practice

Practice

What is the purpose of the <summary> tag in HTML?