<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 (en-US)` |
| 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>
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-summary-element |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<details>`