Can a <summary> HTML element be a Heading element? (H2, H3, H4)

Published: December 8, 2022

I randomly came across a thought while writing HTML for a client's site: can a HTML summary (<summary>) be a heading element, such as H2, H3 or H4?

So basically this:

<details>
    <summary><h3>About Keyboards</h3></summary>
    <p>A computer keyboard is a peripheral input device modeled after the typewriter keyboard...</p>
</details>

I looked into it, and yes it can be a heading! One heading is allowed per summary, so just make sure the H2, H3 or H4 that you are using is the only element inside your summary element. The content should come after it, like on the example above.

Screenshot that says that heading elements are allowed inside a summary

Here's my source for it:

"Permitted content: Phrasing content or one element of Heading content"

–MDN Web Docs, <summary>: The Disclosure Summary element

And it does make sense! If you happen to have a structure where a heading's content content should be one click away, then of course a heading should be allowed as a summary. That's good in terms of not requiring JavaScript and having it as most semantic and most accessible as possible!