码农教程 - 一技在手,衣食无忧! tools

HTML <summary> Tag

❮ Previous Complete HTML Reference Next ❯

Example

Using the <summary> element:

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

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

Note: The <summary> element should be the first child element of the <details> element.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<summary> 12.0 79.0 49.0 6.0 15.0

Global Attributes

The <summary> tag also supports the Global Attributes in HTML.

Event Attributes

The <summary> tag also supports the Event Attributes in HTML.

More Examples

Example

Use CSS to style <details> and <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>
Try it Yourself »

Related Pages

HTML DOM reference: Summary Object

Default CSS Settings

Most browsers will display the <summary> element with the following default values:

summary {
  display: block;
}


❮ Previous Complete HTML Reference Next ❯