Categories
Web development

HTML summary Tag

Learn how to use the HTML summary Tag.


HTML summary Tag

The HTML <summary> element specifies a visible heading for the <details> tag. The heading can be clicked to view/hide the details.

Example1:

<!DOCTYPE html>
<html>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Example2:

Style with CSS details and summary elements:

<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
  padding: 5px;
  width: 200px;
  background-color: #f5f3f4;
  border: none;
  box-shadow: 2px 2px #333;
  cursor: pointer;
}

details > p {
  background-color: #f5f3f4;
  padding: 5px;
  margin: 0;
  box-shadow: 2px 2px #333
}
</style>
</head>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Enjoy coding!

Read also:

HTML caption tag

HTML input tag

HTML label tag