data-* / hidden / tabindex

data-*, hidden, and tabindex are global attributes that can be applied to almost all HTML elements. data-* embeds custom data for use in JavaScript, hidden hides an element from view, and tabindex controls the focus order when the user navigates with the Tab key.

Syntax

<!-- data-* custom data attributes -->
<div data-user-id="123" data-role="admin">...</div>

<!-- hidden hides an element -->
<p hidden>This paragraph is hidden.</p>

<!-- tabindex controls focus order -->
<div tabindex="0">Focusable element</div>
<input tabindex="1" type="text">
<input tabindex="-1" type="text"><!-- Skipped by Tab key -->

Attribute list

Attribute	Description
data-*	Embeds custom data in an element. You can choose any name after `data-`. The value is accessible in JavaScript via the `dataset` property.
hidden	Hides an element. It is a boolean attribute — simply adding it makes the element invisible, equivalent to setting `display: none` in CSS.
tabindex	Specifies the Tab key focus order as a number. A value of `0` makes the element focusable in document order; `-1` removes it from Tab navigation.

tabindex values

Value	Description
Positive integer (1, 2, 3...)	Elements are focused in ascending numerical order. This disrupts the natural document order, so it is generally avoided.
0	The element is focused in DOM order. Use this to make normally non-focusable elements (such as `div`) focusable.
-1	The element is excluded from Tab navigation. It can still be focused programmatically via `.focus()` in JavaScript.

Sample code

<!-- Embed data with data-* -->
<ul id="product-list">
  <li data-product-id="101" data-price="1500">Product A</li>
  <li data-product-id="102" data-price="2800">Product B</li>
</ul>

<!-- Hide a panel initially with hidden -->
<div id="detail-panel" hidden>
  <p>Detailed information is shown here.</p>
</div>

<button onclick="document.getElementById('detail-panel').hidden = false;">
  Show details
</button>

// Read data-* attributes with JavaScript
var items = document.querySelectorAll('#product-list li');
items.forEach(function(item) {
  var id    = item.dataset.productId; // data-product-id → dataset.productId
  var price = item.dataset.price;
  console.log('ID: ' + id + ' Price: $' + price);
});

Result

When the page loads, only the "Show details" button is visible. Clicking the button removes the hidden attribute and reveals the detail panel. The console outputs the ID and price of each product.

Notes

The data-* attribute is commonly used to pass data between HTML and JavaScript. You access the values via the dataset property. Hyphenated attribute names (e.g., data-product-id) are automatically converted to camelCase (e.g., dataset.productId).

The hidden attribute has the same effect as display: none in CSS, but as an HTML attribute it lets you toggle visibility with just element.hidden = true/false in JavaScript. Note that if an element has a CSS rule such as display: flex, that rule may override hidden, so use it with care.

Use tabindex to improve accessibility. Avoid using positive integers to control focus order — doing so disrupts the natural DOM order and can confuse screen reader users. In most cases, tabindex="0" and tabindex="-1" are all you need.