Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

Permitted content Phrasing content or one element of Heading content
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parents The <details> element.
Permitted ARIA roles button
DOM interface HTMLElement

Attributes

This element only includes the global attributes.

Usage notes

The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

Default label text

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

Default style

Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to display: block to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

Examples

Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element.

Basic example

A simple example showing the use of <summary> in a <details> element:

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Summaries as headings

You can use heading elements in <summary>, like this:

<details open>
  <summary><h4>Overview</h4></summary>
    <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

This currently has some spacing issues that could be addressed using CSS.

HTML in summaries

This example adds some semantics to the <summary> element to indicate the label as important:

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<summary>' in that specification.
Living Standard  
HTML 5.1
The definition of '<summary>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support12 No149 No156
display: list-item No2 No49 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4 Yes No14914 No Yes
display: list-item No No2 No49 No No No

1. In development.

2. Chrome currently doesn't use display: list-item on the <summary> element, so display: block will not automatically hide the disclosure widget. Instead, use the non-standard pseudo-element ::-webit-details-marker to change the disclosure widget in Chrome. See Chrome bug 590014 for details.

See also

Метки документа и участники

Обновлялась последний раз: chharvey,