Text not allowed in element “details” in this context.

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>

Learn more:

MDN Reference

MDN Web Docs: the details element

→

MDN Reference

MDN Web Docs: the summary element

→

WHATWG Spec

HTML Living Standard: interactive elements

→