HTML open Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The open attribute in HTML is a Boolean attribute used primarily with the <details> element to indicate that the contents should be visible by default. When a <details> element includes the open attribute, it means that the detailed information contained within it, usually wrapped by a <summary> tag for the title or heading, is displayed to the user from the start. Without the open attribute, the content is hidden and only shown when the user activates the <summary> element, typically by clicking on it.

In essence, the open attribute controls the initial display state of the additional information that <details> encompasses. Its presence (with or without a value, since it's a Boolean attribute) means the details are expanded, and its absence means they are collapsed. This attribute enhances web pages by allowing for the efficient organization of content, making it more user-friendly by showing or hiding details as needed or as preferred by the web designer.

Syntax

<details open>

Values

The open attribute is a boolean attribute, therefore no values are associated with this attribute.

Applies To

<details>

Example

HTML

<details open>

  <summary>This is a summary</summary>

  <p>Here are some details that will be visible by default because the open attribute is present.</p>

</details>



<details>

  <summary>This is another summary</summary>

  <p>Here are some details that will be hidden by default because the open attribute is not present.</p>

</details>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML open attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.