The **`<summary>`** element in HTML is used to specify a visible heading, summary, caption, or legend for the [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) element's interactive box. Users click on the visible text wrapped by the `<summary>` element, which can open or close the box that contains the markup of the children elements of the `<details>` element. The `<summary>` element can contain plain text, heading elements, or any HTML element that can be specified inside the `<p>` (paragraph) element.

The `<summary>` element and `<details>` element are used in conjunction. However, the restriction is that the `<summary>` element must be the first child of the `<details>` element. If the `<summary>` element is not specified as the first `<details>`, then the default label "Details" is used for the box. 

# Example


<html>
 <head>
 </head>
 <body>
  <details>
    <summary>Summary Element in HTML</summary>
    <p>The summary element in HTML is used to specify a visible heading, summary, caption, or legend for the details element’s interactive box.</p>
  </details>
 </body>
</html>

codemirror

# Explanation
The above code wraps a simple text "Summary Element in HTML" inside the `<summary>` element, which is the first child of the `<details>` element. You can view/hide the paragraph content inside the `<p>` element by clicking on the text, "Summary Element in HTML".

What is the summary element in HTML?

The `<summary>` element in HTML provides a clickable heading for the `<details>` element, revealing hidden content.