---
title: '<summary>: The Disclosure Summary element'
slug: Web/HTML/Element/summary
translation_of: Web/HTML/Element/summary
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">The <strong>HTML Disclosure Summary element</strong> (<strong><code>&lt;summary&gt;</code></strong>) element specifies a summary, caption, or legend for a {{HTMLElement("details")}} element's disclosure box.</span> Clicking the <code>&lt;summary&gt;</code> element toggles the state of the parent <code>&lt;details&gt;</code> element open and closed.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>None, both the start tag and the end tag are mandatory.</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>The {{HTMLElement("details")}} element.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>{{ARIARole("button")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<h2 id="Примечания">Примечания</h2>

<p>Содержимым элемента <code>&lt;summary&gt;</code>  может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.</p>

<p>Элемент <code>&lt;summary&gt;</code> может быть использован в качестве потомка элемента <code>&lt;details&gt;</code> . Когда пользователь кликает по элементу summary, его родитель  - <code>&lt;details&gt;</code> меняет состояние с раскрытого или закрытого на обратное,и тогда {{event("toggle")}} event is sent to the <code>&lt;details&gt;</code> element, which can be used to let you know when this state change occurs.</p>

<h3 id="Default_label_text">Default label text</h3>

<p>If a <code>&lt;details&gt;</code> element's first child is not a <code>&lt;summary&gt;</code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p>

<h3 id="Default_style">Default style</h3>

<p>Per the HTML specification, the default style for <code>&lt;summary&gt;</code> elements includes <code>display: list-item</code>. 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.</p>

<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p>

<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p>

<h2 id="Примеры">Примеры</h2>

<p>Below are some examples showing <code>&lt;summary&gt;</code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p>

<h3 id="Простой_пример">Простой пример</h3>

<p>A simple example showing the use of <code>&lt;summary&gt;</code> in a {{HTMLElement("details")}} element:</p>

<pre class="brush: html">&lt;details open&gt;
  &lt;summary&gt;Overview&lt;/summary&gt;
  &lt;ol&gt;
    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
  &lt;/ol&gt;
&lt;/details&gt;</pre>

<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p>

<h3 id="Summaries_as_headings">Summaries as headings</h3>

<p>You can use heading elements in <code>&lt;summary&gt;</code>, like this:</p>

<pre class="brush: html">&lt;details open&gt;
  &lt;summary&gt;&lt;h4&gt;Overview&lt;/h4&gt;&lt;/summary&gt;
    &lt;ol&gt;
    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
  &lt;/ol&gt;
&lt;/details&gt;</pre>

<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p>

<p>This currently has some spacing issues that could be addressed using CSS.</p>

<h3 id="HTML_in_summaries">HTML in summaries</h3>

<p>This example adds some semantics to the <code>&lt;summary&gt;</code> element to indicate the label as important:</p>

<pre class="brush: html">&lt;details open&gt;
  &lt;summary&gt;&lt;strong&gt;Overview&lt;/strong&gt;&lt;/summary&gt;
  &lt;ol&gt;
    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
  &lt;/ol&gt;
&lt;/details&gt;</pre>

<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.summary")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTMLElement("details")}}</li>
</ul>