<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

Specification Status Comment
HTML Living Standard
Определение '<summary>' в этой спецификации.
Живой стандарт
HTML 5.1
Определение '<summary>' в этой спецификации.
Рекомендация Initial definition

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
summaryChrome Полная поддержка 12Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания In development.
Firefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 6WebView Android Полная поддержка 4Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 49Opera Android Полная поддержка 14Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
display: list-itemChrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания 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.
Edge Нет поддержки НетFirefox Полная поддержка 49IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания 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.
Firefox Android Полная поддержка 49Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.

See also