HTML details Tag

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.