In this section, we will learn what HTML <summary> element is and how to use it.

What is <summary> Tag in HTML?

HTML <summary> element is used inside the body of HTML <details> element in order to create a header for the content of the <details> element.

The content of the <summary> element is visible to users and they can click on the content to see the full content of the <details> element.

HTML <summary> Tag Syntax:

<summary> Summary content </summary>

HTML <summary> Tag Values

The value we set for the <summary> content is a short description that users can see and click if they want the full content of the parent <details> element.

Example: using <summary> tag in HTML

See the Pen using <summary> tag in HTML by Omid Dehghan (@odehghan) on CodePen.