TIL about HTML5 details and summary tags

Writing the previous blog post I learnt something new, that I want to share here. There are two code snippets, which illustrate the usefulness of having ASCII art illustrations commenting the code. The idea was to let the reader see one example after another, so I needed something like a collapsible element.

Having learnt about them before, but not using them, I totally forgot about the <details> and <summary> tags.

<details>
  <summary>Click to expand</summary>
  Today I learnt about the details tag and the summary tag! Yay!
</details>

The result looks like this:

No JavaScript. Plain HTML. I like it. And now that I had a chance to rediscover and use it, I hope I won’t forget about it again.

Example Markdown with plain HTML

This blog is a static website, and its posts are written in markdown. Markdown does not offer collapsible elements, but it is possible to directly insert html-elements instead, too. The following code snippet is what the markdown for the text above looks like:

```html
<details>
  <summary>Click to expand</summary>
  Today I learnt about the details tag and the summary tag! Yay!
</details>
```

The result looks like this:

---

<details>
    <summary>Click to expand</summary>
    Today I learnt about the details tag and the summary tag! Yay!
</details>

---

Additional resources

• MDN Web Docs: details
• MDN Web Docs: summary
• If you want to learn more about HTML in general, you might find this guide useful: Websiteplanet