HTML Guides for details

The open attribute on <details> is a boolean attribute, so it doesn't take values like "true" or "false".

A boolean attribute is on when it's present and off when it's absent. HTML allows only two values for one: the empty string (open="") or the attribute's own name (open="open"). Anything else, such as "true", "false", "1" or "yes", is invalid, and the validator quotes the value it found in the message.

Browsers only check whether the attribute is there, so open="false" still renders the <details> element expanded. To start it collapsed, leave the attribute out.

This often happens when a template prints a boolean variable straight into the attribute, as in open="{{ is_open }}". Output the bare open attribute when the condition is true and nothing when it's false. In JavaScript, set the open property instead (details.open = false). It takes a real boolean and adds or removes the attribute for you.

Invalid example

<details open="true">

<summary>Shipping details</summary>

<p>Orders ship within two business days.</p>

</details>

<details open="false">

<summary>Return policy</summary>

<p>Returns are accepted within 30 days.</p>

</details>

Valid example

<details open>

<summary>Shipping details</summary>

<p>Orders ship within two business days.</p>

</details>

<details>

<summary>Return policy</summary>

<p>Returns are accepted within 30 days.</p>

</details>

A <details> element can hold text only after its <summary>, so any text before the <summary>, even an invisible character, is invalid.

The content model of <details> is one <summary> element followed by flow content, which means the <summary> has to come first. Spaces, tabs and line breaks between <details> and <summary> are fine. Any other character counts as text, and text in that position breaks the rule. Text after the <summary> is allowed, because it's part of the content the widget shows when it opens.

Invisible characters cause this error often. Pasting from a word processor or a rich text editor can leave a non-breaking space ( ) or a zero-width space (​, U+200B) right after the opening <details> tag. The page looks normal, but the validator still finds text there. Search the source for those characters and delete them.

If the text is meant as the label, move it into the <summary>. If it's part of the content, put it after the <summary>. A <details> with no <summary> at all also triggers this error, together with one saying the required <summary> child is missing.

Invalid example

<details>

Shipping information

<summary>Shipping</summary>

<p>Orders ship within two days.</p>

</details>

Valid example

<details>

<summary>Shipping information</summary>

<p>Orders ship within two days.</p>

</details>