<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:

html

<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:

html

<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:

html

<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>

Спецификации

Specification
HTML Standard # the-summary-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

<details>