Summary

  • HTML’s details and summary pair makes a browser-operated disclosure: the reader activates the label and the browser shows or hides the rest.
  • The modern name attribute can make several disclosures mutually exclusive, handing the page a second choice about how much stays open.

A long web page used to behave like a filing cabinet emptied onto the floor: every instruction, caveat and optional control lay in the same visual pile. A designer could build a folding panel with script. HTML eventually gave the page a smaller tool. Write <details>, put a <summary> first, and the browser supplies the hinge. The reader sees the label and chooses whether to open it. The delight lies in its modesty. The page gets a cupboard; the visitor gets the handle.

The W3C’s first public HTML markup draft in March 2010 marked both details and summary as new elements. It described details as a control for information available on demand, with a summary and a Boolean open attribute. The draft recorded a crisp design decision: the concealed material remained part of the document while the act of revealing it became a browser-defined interaction. An author could name the drawer without writing the hinge from scratch.

A 2011 W3C markup reference carried the same idea forward. Its little grammar matters. summary belongs at the front of details; open says the contents should be visible. The pair is more expressive than a generic box whose click behavior lives somewhere in a script file. The browser can read the relationship directly from the document. The author still chooses what goes behind the door and what words appear on it. A label called “More” may be short; a label that says what is inside is useful.

In the maintained HTML Standard, the first summary child is the legend of the compartment. If the author omits it, the browser should provide a legend of its own. When open is absent, the summary alone is shown; when present, the rest appears too. To honor a reader request, the browser adds or removes that attribute. The markup, visible state and user action are joined by a simple rule. The standard also defines a toggle event, so a page can observe the opening or closing without inventing the basic motion.

The rendering rules even describe the small marker beside the summary: one form for closed, another for open. That triangle has a humble job. It tells the reader where to press and what changed. A conventional control is like a well-placed light switch; nobody writes a poem about it until it is missing. Details made this familiar gesture part of HTML’s own vocabulary, useful for a progress report, optional settings or a tightly packed reference page.

Then the door acquired a social life. The current standard lets related details elements share a name. Open one member of the group and another open member closes. A page can make an accordion without assigning a custom script to police every panel. The standard itself warns that this can frustrate people who need several sections visible together. That is an unusually candid specification footnote: tidiness for the page can become extra work for the reader. The humble handle is still there, but the hallway has a rule about how many doors may stand open.

The important history is a change in who performs each action. The author arranges the compartments and writes their labels. The browser implements the opening. The reader decides to peek. With name, the author can also set a house rule about neighboring compartments. An accordion looks like a small interface detail, yet it contains a complete bargain over attention, space and control. The best little door tells you what is inside and lets you leave the others open when you need them.