Details HTML

by

HTML <details> Tag

To define the additional details, to be displayed on demand on a web page, the HTML <details> tag is used. It was introduced in HTML5. The user can view or hide the additional details. The HTML <details> tag is used as a disclosure widget, as per the W3C HTML specification. The user can retrieve additional information or control it. The HTML <summary> tag is also used with the HTML <details> tag to define the summary and the title of the section.

Example:

<!DOCTYPE html>
<html>
<body>
<details>
<summary>Apple</summary>
<p>Apple is a fruit.</p>
<p>An Apple a Day keeps the Doctor away.</p>
</details>
</body>
</html>

Explanation:

In the above example, we are using the <details> tag to add additional details on a topic.

Tag Specific Attributes:

Attribute Uses
open Used to specify that the details are open for the user, i.e., the user can view the details.

Global Attributes:

The HTML Global attributes are supported by the HTML <details> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <details> tag.

Supporting Browsers:

Chrome, Firefox, Opera, and Safari.