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




summary tag

Learn html - html tutorial - Details tag - html examples - html programs

  • <details> element is used for adding the additional information of the content. It will be hide or view depending on the user request.
  • <details> tag is used to create communicating widget for user interaction.
  • The content of a <details> element cannot be visible unless the open attribute is set.
  • <details> tag will support Global and event attributes.
  • <details> tag belongs to Flow content, Sectioning content, Interactive content and Palpable Content category.

Syntax for <details> tag:

<details>content</details>

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

HTML 4.0.1

  • HTML 4 does not support <details> element.

HTML 5

  • HTML 5 support <details> element.

Sample Coding for <details> tag:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML details 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 <details> tag:

<details> Tag Code Explanation

  1. <details> tag is mentioned for the additional information to the user they can view or hide.
  2. The <summary> tag specifies a visible heading (Wikitechy), which should be clicked to view or hide the details.

Output for <details> tag:

<details> Tag Output

  1. When the page loads, the content of the text (Wikitechy) has been hided.
  2. <details> Tag Output
  3. The output shows the details of the text (Wikitechy).

Attribute of <details> tag:

Attribute Value HTML4 HTML5 Description
open open No Yes Defines that the details should be visible to the user.

Browser Support for <details> tag in HTML:

12.0 No 49.0 6.0 15.0

Tips and Notes

  • The <summary> tag is used to define a visible heading for the details. The heading can be clicked to view or hide the details.
  • If the <summary> tag did not present, then the <details> tag automatically displays the heading as “Details”.

Related Searches to details 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.

×