The <summary> and <details> HTML elements

They work thusly: the details element is a collapsible element, like how some file managers display folders with a small arrow or triangle next to them that can be clicked to show the folder's contents.

The first summary element inside the details element is what's shown when the element is closed. Anything else is only shown when the element is open.

One can add the attribute open (doesn't even need a value) to a details element to have it be open by default.

A details element can exist without having a summary element in it. The standards (and HTML validators) require it, but the lack of one won't crash the browser. In that case, it's up to the browser to choose what text to show where the summary would be. Mine says "Details", regardless of what language the document is written in (there's a lang attribute on the root html element).

On styling

I left this page without a global CSS style sheet. By default, at least in 2022, the styling of details is very bare: there's the triangle, but there's no indentation of the contents. As such, it's a little tough to see what's nested where, and what's a child of what.

But here, I have added a padding-left to each of the details elements that are children (and grandchildren) of this element.

First child

It's clear to see how this is a child, because of the indentation.

Borders in addition to padding

A border can also, maybe, perhaps, clarify how deep we are and where we originated from, especially if the tree is long.

But, on those borders

It's kind of not great that adding the border to the details element also adds it to before the arrow and the summary text. It would look better if the border only applied to the contents of the element... but that would need special-casing, and it'd go against how borders work everywhere else.

There's a workaround, though

One can put all the children, except for the summary, in a div and put a border around that.

It feels rather bloated, though, wrapping up everything in yet another layer of divs.

Styling is a headache of its own

Kind of out of scope of this page's point, which is to educate the author in how these work.

Second child

Nothing much here; the end of the tree.

There's also no padding or margin between successive details elements.

Topologically or mathematically, these trees are written in the source code in pre-order.

External links
Date of writing and publication
First published
2022-07-21
Last edited
2022-07-21