Pr.Pg Next Pg

<DETAILS>..</DETAILS> tag tutorials

  • The <details> Element is used as a disclosure widget from which the user can retrieve additional information The <details> tag is new in HTML5.

  • The <DETAILS> tag can used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

  • The content of a <DETAILS> element should not be visible unless the open attribute is set.

  • The <DETAILS> tag is currently only supported in Chrome and in Safari 6.

  • The <SUMMARY> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.

  • The below table shows the attribute of <DETAILS> tag:

 

Sr No

Attributes

Descriptions

1

Open

This attribute specify that the details should be visible (open) to the user.

2

ID

This attribute specify a unique id for an element in document.

3

Style

This attribute specify an inline CSS style for an element.

4

Title

This attribute specify extra information about an element.

5

Draggable

This attribute specify whether an element is draggable or not.

6

Hidden

This attribute specify that an element is not yet, or is no longer, relevant

 

Syntax:

<body>

<details>

<summery>

some text

</summery>

</details>

<body>

 

Example: HTML program to demonstrate details element

Output:
Pr.Pg border                                              Next Pg