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:

<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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×