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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-tabs-element-is-a-completely-unknown-element-that-is-not-allowed-anywhere-in-any-html-content
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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.