<summary>: The Disclosure Summary element

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

Атрибуты

Π­Ρ‚ΠΎΡ‚ элСмСнт Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΡ‹ΠΌ элСмСнта <summary>  ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, простой тСкст ΠΈΠ»ΠΈ HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π°Π±Π·Π°Ρ†Π΅.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <summary> ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использован Π² качСствС ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ° элСмСнта <details> . Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΠΎ элСмСнту summary, Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ  - <details> мСняСт состояниС с раскрытого ΠΈΠ»ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ Π½Π° ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ΅,ΠΈ Ρ‚ΠΎΠ³Π΄Π° 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.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

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

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

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

Browser compatibility

BCD tables only load in the browser

See also