CodesJava

Easy learning with example program codes

Details HTML

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 from 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>

Output 1:

Output 2:

Explanation:

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

Tag Specific Attributes:

AttributeUses
openUsed 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.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status