This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<summary>: The Disclosure Summary element
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
* Some parts of this feature may have varying levels of support.
TheHTML 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.
Интерактивный пример
<details> <summary> I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? </summary> A keyboard.</details>details { border: 1px solid #aaa; border-radius: 4px; padding: 0.5em 0.5em 0;}summary { font-weight: bold; margin: -0.5em -0.5em 0; padding: 0.5em;}details[open] { padding: 0.5em;}details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: 0.5em;}| Permitted content | Phrasing content or one element ofHeading 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, theuser 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 includesdisplay: 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 todisplay: block to remove the disclosure triangle.
See theBrowser 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>Спецификации
| Specification |
|---|
| HTML # the-summary-element |