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:


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 support <details> element.

Sample Coding for <details> tag:

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

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