HTML Syntax

<details ... >
   <summary> ... </summary>
   ...
</details>

NOTE: Both start and end tags are required.

The <summary> element defines a visible heading, caption or legend for the <details> element.

The content of the summary tags can be activated ( typically by a mouse click ) to show or hide the content of the corresponding details element.

As per the HTML standard, the summary element displays as a list-item. This makes it possible to change or remove the list-item marker displayed next to the caption.

The marker is typically rendered as a small triangle that rotates or twists to indicate an open or closed state. The user can open and close the widget on demand by clicking on the caption next to the marker.

If not specified, user agents normally provide its own caption or label for the summary tags.

NOTE: This element can only be used within the <details> element.

The following example shows how the <summary> element may be used.

<details>
   <summary>Legend or label here</summary>
   <p>More information about the legend here.</p>
</details>

which would render on a Web page as follows:

The following example shows use of the name attribute to group related details elements.

<details name=groupName>
   <summary>Legend for details1 here</summary>
   <p>More information about details1 here.</p>
</details>
<details name=groupName>
   <summary>Legend for details2 here</summary>
   <p>More information about details2 here.</p>
</details>
<details name=groupName>
   <summary>Legend for details3 here</summary>
   <p>More information about details3 here.</p>
</details>

which would render on a Web page as follows:

And here is an example of using CSS to customize the appearance of the <summary> element.

 Show me 

• 4.11.2 The summary element

DETAILS