HTML <summary> Tag

The <summary> element is used to define a visible heading for the <details> element, which is a disclosure widget that allows users to show or hide additional content. The <summary> acts as the clickable label for the details section, providing a concise description of the content that can be expanded or collapsed.

When rendered in a browser, the <summary> is typically displayed as a bold or highlighted line with a small disclosure triangle or arrow next to it, indicating that it can be expanded to reveal more information. Clicking on the <summary> toggles the visibility of the content inside the parent <details> element.

A key feature of the <summary> element is that it enhances accessibility by providing a clear and semantic way for users to interact with expandable content. It can contain text, inline elements, and even small icons or images, allowing for flexible design. However, only the first <summary> element within a <details> block is recognized as the heading; additional <summary> tags are ignored.

The <summary> element does not function independently - it must always be a direct child of a <details> element. It is ideal for FAQs, collapsible sections, and any scenario where content can be optionally hidden to reduce clutter on the page.