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 applied inside the <details> element. A corresponding closing tag is essential.

The <summary> element is a recent addition to HTML 5.

HTML summary tag example

<details>

<summary>C# Tutorial Summary</summary>

<p> C# Tutorial is a popular tutorial website.</p>

<p>You can learn various tutorials on Example such as HTML, CSS, JavaScript, Java, Android.</p>

</details>

Output:

C# Tutorial is a popular tutorial website.

You can explore a variety of guides on Example including HTML, CSS, JavaScript, Java, and 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>

Output:

• ✅ 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> element exclusively accommodates Global attributes in HTML 5. No other distinct attributes are employed alongside the <summary> element.

Supporting Browsers