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

<p><span class="seoSummary"><strong>HTML 공개 요약 요소</strong> (<strong><code>&lt;요약&gt;</code></strong>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. </span> <code>&lt;요약&gt;</code> 요소를 클릭하면 부모 <code>&lt;상세&gt;</code> 요소의 상태가 열리거나 닫힌다.</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="Attributes">Attributes</h2>

<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<h2 id="Usage_notes">Usage notes</h2>

<p>The <code>&lt;summary&gt;</code> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.</p>

<p>A <code>&lt;summary&gt;</code> element may <em>only</em> be used as the first child of a <code>&lt;details&gt;</code> element. When the user clicks on the summary, the parent <code>&lt;details&gt;</code> element is toggled open or closed, and then a {{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="Examples">Examples</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="Basic_example">Basic example</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>