html tutorial - <details> Tag in HTML - html5 - html code - html form
- <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 does not support <details> element.
- HTML 5 support <details> element.
Sample Coding for <details> tag:
Code Explanation for <details> tag:
- <details> tag is mentioned for the additional information to the user they can view or hide.
- The <summary> tag specifies a visible heading (Wikitechy), which should be clicked to view or hide the details.
Output for <details> tag:
- When the page loads, the content of the text (Wikitechy) has been hided.
- The output shows the details of the text (Wikitechy).
Attribute of <details> tag:
|open||open||No||Yes||Defines that the details should be visible to the user.|
Browser Support for <details> tag in HTML:
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”.