HTML <details> tag

Use of <details> tag

The <details> tag is new in HTML5. It is used to define additional information of a given section. Users can hide and show the hidden information when click the summary statement.
Usually, we used a summary statement within the <summary> tag which would be visible by the users as a heading.
By default, the <summary> tag is associated with an widget like arrow down before click while it changes to upper arrow after click. But we can change the widget of somewhat better than the default by using JavaScript.

Example of <details> tag

    <details>
       <summary> This is visible sentence. </summary>
       <p> This paragraph will be hidden as long as you click the above sentence. </p>
    </details>

Supported Browsers

The following versions are the minimum versions that support <details> tag fully.

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<details> 12.0 not supported 49.0 6.0 15.0

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <details>
       <summary> This is visible sentence. </summary>
       <p> This paragraph will be hidden as long as you click the above sentence. </p>
    </details>
</body>
</html>

Output

This is visible sentence.

This paragraph will be hidden as long as you click the above sentence.

Attribute of <details> tag


Attribute Value Note
open open It defines the details should be visible.

More reference

<details> tag is new in HTML5.
<summary> tag is used to define the visible section of <details> tag which can be clicked to hide or show the elements.
Using of <details> tag is useful in the copyright notice or other bid information of your website.

Example

Why choose Us?

Our website has dedicated a lot to the HTML learning from ultimate beginner to pro.

Copyright Notice

All the contents are maintained under the Logic Maker Studio.
Copyright © 2018||All rights Reserved.

Default CSS properties of <details> tag

details {
    display:block;
}