HTML <summary> tag

The <summary> tag is used to act as a visible part or heading of the associated <details> element. It allows users to click to show and hide the additional information. It must be contained inside the <details> element as a first-child.

Type: Block Element

Syntax of <summary> tag

<details>
 <summary>
  Visible part
 </summary>
Hidden content
</details>

The <summary> tag is new in HTML 5.

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<summary>	12.0 or higher	No	48.0 or higher	6.0 or higher	15.0 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<details>
  <summary>More info</summary>
  <p>
    Content here.
  </p>
</details>
</body>
</html>

Run The code »

Output on the browser

More info

Content here.

Styling <summary> with CSS

summary {
  color:green;
  cursor:pointer;
}

The <details> and <summary> tag are not supported in Internet Explorer. So, it is better to use JavaScript which is supported in all browsers and has more professional appearance.

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<summary>	12.0 or higher	No	49.0 or higher	6.0 or higher	15.0 or higher

Usage of <summary> tag

The <summary> tag is used to define the visible section of the <details> tag. This visible section can be clicked to show or hide the elements placed inside the <details> tag. Using the <details> tag is useful for displaying FAQs, copyright notice and other hidden information.

Why chose us?

Our website has dedicated a lot to teach you HTML tutorials from ultimate beginner to pro.

Default CSS property of <summary> tag

summary {
  display:block;
}

❮ Previous Next ❯