---
title: <summary>
slug: Web/HTML/Element/summary
translation_of: Web/HTML/Element/summary
---
<div>{{HTMLRef}}</div>

<h2 id="Summary">Summary</h2>

<p>The HTML <em>summary </em>element (<code>&lt;summary&gt;</code>) is used as a summary, caption, or legend for the content of a {{HTMLElement("details")}} element.</p>

<div class="note"><strong>Note:</strong> If the <code>&lt;summary&gt;</code> element is omitted, the heading "details" will be used.</div>

<div class="note"><strong>Note:</strong> The default style for <code>&lt;summary&gt;</code> is <code>display:list-item</code> per <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">HTML standard</a>.  If the style is being changed to <code>display:block</code>, the disclosure triangle will be dismissed, which is expected. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283989">Bug 1283989</a> for more information.</div>

<h2 id="Usage_context">Usage context</h2>

<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 parent element</th>
   <td>The {{HTMLElement("details")}} element.</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#the-summary-element" rel="external nofollow">HTML5, section 4.11.2</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element only includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>

<h2 id="DOM_interface">DOM interface</h2>

<p>This element implements the {{domxref("HTMLElement")}} interface.</p>

<h2 id="Examples">Examples</h2>

<details style="color: blue; margin-left: 15px; margin-bottom: 10px;">
<p style="color: red;">In summation, get details from the link on the next line</p>
</details>

<p>Please see the {{HTMLElement("details")}} page for examples on &lt;summary&gt;.</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>

{{Compat("html.elements.summary")}}

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

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