HTML Summary Tag

The HTML <summary> tag is used with <details> tag. It is used as a summary, caption or legend for the content of a <details> element.

It is used within the <details> tag. It must have a closing tag.

The <summary> tag is new and introduced in HTML 5.

HTML summary tag example

<details>
<summary>JavaTpoint Summary</summary>
<p> JavaTpoint is a popular tutorial website.</p>
<p>You can learn various tutorials on JavaTpoint such as HTML, CSS, JavaScript, Java, Android.</p>
</details>

Test it Now

Output:

JavaTpoint Summary

JavaTpoint is a popular tutorial website.

You can learn various tutorials on JavaTpoint such as HTML, CSS, JavaScript, Java, Android.

Let's see another example of HTML summary tag.

<details>  
  <summary>MacBook Pro Specification</summary>  
    <ul>  
      <li><strong>13.3-inch LED-backlit glossy widescreen display</strong> with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).</li>  
      <li><strong>2.4 GHz Intel Core i5 dual-core processor</strong> with 3 MB shared L3 cache for excellent multitasking.</li>  
      <li><strong>Intel HD Graphics 3000</strong> with 384 MB of DDR3 SDRAM shared with main memory.</li>  
      <li><strong>500 GB Serial ATA hard drive</strong> (5400 RPM)</li>  
      <li><strong>4 GB installed RAM</strong> (1333 MHz DDR3; supports up to 8 GB)</li>  
    </ul>  
</details>

Test it Now

Output:

MacBook Pro Specification

13.3-inch LED-backlit glossy widescreen display with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).
2.4 GHz Intel Core i5 dual-core processor with 3 MB shared L3 cache for excellent multitasking.
Intel HD Graphics 3000 with 384 MB of DDR3 SDRAM shared with main memory.
500 GB Serial ATA hard drive (5400 RPM)
4 GB installed RAM (1333 MHz DDR3; supports up to 8 GB)

The <summary> tag supports only Global attributes in HTML 5. There are no other specific attributes used with <summary> tag.