A Tab by Any Other Name

What if HTML had a native "tabs" element? That question has been occupying Dave Rupert and a group of collaborators from the OpenUI community, who call themselves the "Tabvengers." Their research into tab controls across operating systems, JavaScript frameworks, and web components surfaced a plot twist: the ideal element to standardize might not be a <tabs> element at all.

The core insight comes down to design affordances. A literal manila-folder tab interface is functionally equivalent to an accordion that shows one item at a time, which is itself close to the behavior of <details> and <summary>. Rather than lock in one visual pattern, the most useful thing HTML could offer is a way to support multiple affordances from a single, semantic source of truth—and even switch between them responsively.

That leads to a surprisingly humble answer: the markup doesn't need anything exotic. Regular header-based semantic HTML is enough:

<h2>Header</h2>
<p>Content</p>

<h2>Header</h2>
<p>Content</p>

<h2>Header</h2>
<p>Content</p>

This structure means the content can render fine on its own as one design, while the headers can later become tabs or summaries depending on the chosen presentation. That's the foundation of <spicy-sections>, a web component being explored by the Tabvengers. You wrap the semantic HTML in the component and let CSS dictate which interaction pattern applies and when.

<spicy-sections>
  <h2>Header</h2>
  <p>Content</p>

  <h2>Header</h2>
  <p>Content</p>

  <h2>Header</h2>
  <p>Content</p>
</spicy-sections>
spicy-sections {
  --const-mq-affordances:
    [screen and (max-width: 40em) ] collapse |
    [screen and (min-width: 60em) ] tab-bar;
  display: block;
}

Brian Kardell put together an example to demonstrate the concept, and Dave Rupert followed with his own to explore the feel of it. A video walkthrough is available for those who can't easily resize a browser window to test the responsive behavior firsthand.

This component is hand-built for now, but the hope is that it helps ignite conversations at the spec and browser implementation levels. A native version of this pattern would spare many developers from writing their own tab logic from scratch—and from inadvertently getting accessibility wrong in the process. More of that would be welcome.

For deeper discussion, the topic appears on ShopTalk episode 486 around the 15:17 mark. Hidde de Vries has also written up his own experimentation with <spicy-sections>, and Dave Rupert's recent talk "HTML with Superpowers" covers broader uses of web components beyond this specific case.