HTML <details> Tag

❮Reference❯

Example

Using the <details> element:

<details>
  <summary>Copyright 1999-2018.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Try it Yourself »

---

Definition and Usage

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be 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.

---

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<details>	12.0	Not supported	49.0	6.0	15.0

---

Differences Between HTML 4.01 and HTML5

The <details> tag is new in HTML5.

---

Tips and Notes

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

---

---

Attributes

= New in HTML5.

Attribute	Value	Description
open	open	Specifies that the details should be visible (open) to the user

Global Attributes

The <details> tag also supports the Global Attributes in HTML.

---

Event Attributes

The <details> tag also supports the Event Attributes in HTML.

---

Related Pages

HTML DOM reference: Details Object

---

Default CSS Settings

Most browsers will display the <details> element with the following default values:

details { 
  display: block;}