5 min read
Global and Data Attributes
Prerequisites: Elements, tags, and attributes
Global attributes work on every element.
| Attribute | Purpose |
|---|---|
id |
Unique identifier — fragment links, labels, ARIA references, JavaScript |
class |
Space-separated names for CSS and JavaScript |
style |
Inline CSS (prefer a stylesheet) |
title |
Advisory tooltip — don't rely on it for important information |
lang / dir |
Language and text direction of the content |
hidden |
Not relevant now: not displayed, not announced |
hidden="until-found" |
Hidden, but find-in-page can reveal it |
tabindex |
Focus behavior |
inert |
Make a subtree non-interactive |
translate="no" |
Don't machine-translate (brand names, code) |
spellcheck |
Turn spell checking on or off in editable text |
contenteditable |
Let people edit the element's content |
draggable |
Enable drag and drop |
autofocus |
Focus this element when the page (or dialog) opens |
accesskey |
A keyboard shortcut — conflicts with assistive tech; avoid |
popover |
Make the element a popover |
enterkeyhint |
Label for the Enter key on phone keyboards (search, send, next) |
data-* attributes
Custom data for your own scripts and styles. The name after data- must
be lowercase, and JavaScript reads it through dataset, converting
hyphenated names to camelCase:
<ul id="products">
<li data-product-id="rye-01" data-price="4.20" data-in-stock="true">Rye loaf</li>
<li data-product-id="spelt-02" data-price="3.80" data-in-stock="false">Spelt loaf</li>
</ul>
<script>
for (const item of document.querySelectorAll("#products li")) {
const { productId, price, inStock } = item.dataset;
console.log(productId, typeof price, price, inStock === "true");
}
document.querySelector("li").dataset.addedToCart = "yes";
console.log(document.querySelector("li").outerHTML);
</script>
rye-01 string 4.20 true
spelt-02 string 3.80 false
<li data-product-id="rye-01" data-price="4.20" data-in-stock="true" data-added-to-cart="yes">Rye loaf</li>
- Values are always strings — convert with
Number()or compare with"true". - Setting
dataset.addedToCartadds adata-added-to-cartattribute. - CSS can select them:
[data-in-stock="false"] { opacity: 0.5; }. - Don't store data that belongs in visible content or in a proper
attribute (like
hreforvalue), and don't put secrets in them.
Boolean attributes, once more
hidden, disabled, required, checked, open, inert,
autofocus and friends are true when present, whatever the value.
In JavaScript use the properties (el.hidden = false) or
removeAttribute.
<!-- Wrong: hidden="false" still hides the element -->
<p id="msg" hidden="false">Still hidden!</p>
<script>
const msg = document.getElementById("msg");
console.log(msg.hidden);
msg.hidden = false;
console.log(msg.hasAttribute("hidden"));
</script>
true
false
Practice
Add data- attributes to a button so a script can know it adds product
sku-778 in quantity 2, and write the line of JavaScript that reads the
quantity as a number.
Show solution
<button type="button" data-sku="sku-778" data-qty="2">Add 2 to cart</button>
<script>
const qty = Number(document.querySelector("button").dataset.qty);
</script>