HTML details Tag defines additional details about specific term that user can read by revealing it. User can open and close the detail widget on a click.
Table of Contents
Syntax of HTML details Tag
The Syntax of HTML details Tag is shown below, It has both starting and ending tags.
<details>
Markup language used to create Web Pages.
</details>
Usage of HTML details Tag
HTML details Tag is used to define an area which is hidden by default. This area contains the detail about a specific term. User can reveal the details on a single click and then it can be reclosed as well.
HTML details Tag is used with summary tag, which contains the term that is being described with help of details tag.
Example of HTML details Tag
Simple example of HTML details Tag is shown below.
<details>
<summary>HTML</summary>
<p>Markup language used to create Web Pages.</p>
</details>
Output
The output of above HTML code is shown below.
HTML
Markup language used to create Web Pages.
open attribute is used inside the details Tag to define that the details should be visible to the user by default, it's example is given below.
CSS
Cascading Style Sheet used for presentation of Web Page.
Browser Support for HTML details Tag
HTML details Tag is supported by all major browsers including Safari and Internet Explorer.
Global Attributes Support in HTML details Tag
The HTML details Tag supports all Global Attributes.
Event Attributes Support in HTML details Tag
The HTML details Tag supports all Event Attributes.
HTML details Tag Video
Watch our video on HTML details Tag and subscribe our Youtube Channel.