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



  • 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:

<details>
     <summary>Content</summary>
</details>

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

HTML 4.0.1

  • HTML 4 does not support <summary> tag.

HTML 5

  • The <summary> tag is new to HTML5.

Sample Coding for <summary> tag:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML summary Tag</title>
    </head>
    <body>
        <details>
            <summary>Wikitechy</summary>
            <p>Tutorials</p>
            <p>Articles</p>
            <p>Errors and Fixes</p>
            <p>Interview tips</p>
        </details>
    </body>
</html>

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