summary tag in html5 with example

Home » HTML 5 Examples » HTML 5 Tutorials » HTML5 » summary tag in html5 with example

summary tag in html5 with example

Posted by 20Fingers2Brains on Tags: HTML 5 Examples , HTML 5 Tutorials , HTML5

The HTML <summary> tag specifies a summary/caption that can be used in conjunction with the HTML5 <details> tag. This summary/caption can be clicked on to expand/collapse the details as required.
The <summary> tag, if used, should be the first child of the <details> tag.
The <summary> tag is currently only supported in Chrome.

Example 1 :

<html>
    <head><title>details tag in html5</title></head>
    <body>
        <details>
            <summary>Page Details :</summary>
            <span>Author : <b>20 Fingers 2 Brains</b></span><br />
            <span>language : <b>jQuery</b></span><br />
            <span>element : <b>details</b></span>
        </details>
    </body>
</html>

Demo :

In the above example, we have used details and summary tag both. The summary tags gives caption to the details section. If we have not used summary tag, the caption would have been Details, which is default.