HTML Reference Manual

Complete List of HTML Tags

HTML: <details> Tag

The HTML <details> element can create a collapsible component that only displays the contained information when it is expanded. The <summary> element can provide a summary or a label for the component.

Online Example

Use the <details> element:

Example

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　How to use the <details> tag (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<details>
　　　　<summary>Details/summary>
　　　　Something small enough to escape casual notice. (Basic Tutorial Website oldtoolbag.com）
</details>
</body>
</html>

Test and see ‹/›

How does it run:

Browser Compatibility

IEFirefoxOperaChromeSafari

Currently, only Chrome and Safari 6 Supports <details> tag.

Definition and Usage Description

The <details> tag specifies additional details that are visible or hidden, as required by the user.

<details> tag is used to provide interactive controls for users to open and close. Any form of content can be placed inside the <details> tag.

The content of the <details> element is not visible to the user unless the open attribute is set.

HTML 4.01 with HTML5difference

<details> tag is an HTML5 in the new tag.

Tips and Notes

Tip:with <summary> Tags used together can define a title for details. The title is visible, and when the user clicks on the title, the details will be displayed.

Attribute

New: HTML5 in the new attribute.

Attribute	Value	Description
openHTML5	open	Specifies whether the details are visible.

Global Attributes

Support for <details> tag Global Attributes of HTML.

Event Attributes

Support for <details> tag HTML Event Attributes.

HTML: <dfn> Tag HTML: <del> Tag