The “tabs” element is a completely-unknown element that is not allowed anywhere in any HTML content.

The <tabs> element does not exist in the HTML specification and is not a valid HTML element.

Browsers parse unknown elements like <tabs> as generic inline elements with no semantics. Screen readers and other assistive technologies cannot interpret them correctly, so users who rely on those tools get no meaningful information about the content's purpose or structure.

If the goal is to create a tabbed interface, use standard HTML elements with appropriate ARIA roles. The WAI-ARIA Authoring Practices describe a well established tabs pattern built from <div>, <button>, and role attributes. Each tab is a <button> with role="tab", grouped inside a container with role="tablist". Each panel is a <div> with role="tabpanel".

HTML examples

Invalid: unknown <tabs> element

<tabs>
  <tab>Tab 1</tab>
  <tab>Tab 2</tab>
  <tab-panel>Content for tab 1</tab-panel>
  <tab-panel>Content for tab 2</tab-panel>
</tabs>

Valid: ARIA tabs pattern with standard elements

<div role="tablist" aria-label="Sample tabs">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Tab 1
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
    Tab 2
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  <p>Content for tab 1</p>
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  <p>Content for tab 2</p>
</div>

In this pattern, aria-selected indicates the active tab, aria-controls links each tab to its panel, and aria-labelledby links each panel back to its tab. The hidden attribute hides inactive panels. JavaScript is needed to toggle aria-selected, tabindex, and hidden when the user switches tabs.

Learn more:

MDN Reference

HTML elements reference

→

WHATWG Spec

HTML Standard - Semantics

→