html tutorial - <summary> Tag in HTML - html5 - html code - html form

summary tag

Learn html - html tutorial - summary tag - html examples - html programs

  • The <summary> element is used to defines a visible heading for the <details> element. The heading can be clicked to view or hide the details.
  • The <summary> element is used as a summary, caption or legend for the content of a <details> element.
  • The <summary> tag supports Global Attributes and Event Attributes.
  • <summary> element belongs to Phrasing content or one element of Heading content.

Syntax for <summary> tag:


Differences between HTML 4.01 and HTML 5 for <summary> tag in HTML:

HTML 4.0.1

  • HTML 4 does not support <summary> tag.


  • The <summary> tag is new to HTML5.

Sample Coding for <summary> tag:

Tryit<!DOCTYPE html>
        <title>Wikitechy HTML summary Tag</title>
            <p>Errors and Fixes</p>
            <p>Interview tips</p>

Code Explanation for <summary> tag:

<summary> Tag Code Explanation

  1. <summary> tag defines the heading for <details> element. Here Wikitechy is the caption for <details> element.

Output for <summary> tag:

<summary> Tag Output

  1. <summary> tag content “Wikitechy” displayed with a hidden details.
  2. <summary> Tag Output
  3. When user click the ”Wikitechy” that will show the details.

Browser Support for <summary> tag in HTML:

12.0 No 48.0 6.0 15.0

Tips and Notes

  • The <details> tag should have <summary> tag as its first child element.

Related Searches to summary tag in html