9.0 HTML Attributes
Attributes provide additional information about an element. They appear inside the
opening tag as name-value pairs:
<tagname attribute="value" another-attr="val2">content</tagname>
Attribute names are case-insensitive in HTML (not in XML). Values should be quoted.
Boolean attributes are present or absent — their value is irrelevant.
9.1 Global Attributes
Global attributes apply to all HTML elements, regardless of type:
Global attributes reference
| Attribute | Effect |
|---|
id | Unique identifier within the document. Used by CSS (#id), JavaScript (getElementById), and fragment links (#id). Must be unique per page. |
class | Space-separated list of class names. Used by CSS (.name) and JavaScript (getElementsByClassName, classList). |
style | Inline CSS declarations. Highest specificity; harder to override. Avoid for anything other than dynamic values set from JavaScript. |
hidden | Boolean. Hides the element (sets display:none). Prefer CSS classes for toggling visibility. |
tabindex | Controls keyboard focus order. 0 adds to natural tab order; -1 allows focus via script only; positive integers set explicit order (avoid). |
title | Advisory text shown as a tooltip on hover. Do not rely on it for accessibility — screen readers do not consistently announce it. |
lang | Language override for a specific element, e.g., a French quote inside an English page. |
dir | Text direction: ltr, rtl, or auto. |
draggable | "true" or "false". Marks element as draggable via the HTML Drag and Drop API. |
contenteditable | "true" makes the element's content editable in-place in the browser. |
spellcheck | "true" or "false". Requests spell-checking on editable text. |
translate | "yes" or "no". Hints that translation services should (or should not) translate the text. |
inert | Boolean. Makes the subtree non-interactive and hidden from assistive technologies. |
9.2 Boolean Attributes
Boolean attributes are true when present and false when absent. The value (if any)
must equal the attribute name or be an empty string — both forms are valid:
<!-- These are all equivalent: -->
<input type="checkbox" checked>
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">
<!-- Common boolean attributes: -->
<input required>
<input disabled>
<input readonly>
<button disabled>Can't click</button>
<video autoplay muted loop></video>
<details open>…</details>
<script defer></script>
<script async></script>
9.3 data-* Custom Attributes
The data-* mechanism lets you store custom data on any HTML element without
inventing new attributes. Any attribute whose name starts with data- followed
by at least one character is a valid custom data attribute:
<li data-user-id="42" data-role="admin" data-active="true">
Alice
</li>
In JavaScript, data-* attributes are accessible via the element's
dataset property. Hyphenated names are converted to camelCase:
data-user-id becomes element.dataset.userId.
<button data-item-id="7" onclick="addToCart(this)">Add</button>
<script>
function addToCart(btn) {
const id = btn.dataset.itemId; // "7"
// …
}
</script>
- Names must be lowercase after the data- prefix.
- Use data-* to store application state that belongs on the element; for shared application state prefer JavaScript variables.
- All dataset values are strings — parse numbers and booleans yourself.
9.4 ARIA Attributes
ARIA (Accessible Rich Internet Applications) attributes supplement HTML semantics for
screen readers when native elements cannot fully describe a widget's role or state.
The first rule of ARIA: use a native HTML element with the right semantics before
reaching for ARIA.
<!-- Role: give a div the semantics of a button (prefer <button>) -->
<div role="button" tabindex="0" onclick="doAction()">Click me</div>
<!-- State: mark expanded/collapsed -->
<button aria-expanded="false" aria-controls="menu">Open menu</button>
<ul id="menu" hidden>…</ul>
<!-- Label: name an element without visible text -->
<button aria-label="Close dialog">×</button>
<!-- Live region: announce dynamic content updates -->
<div aria-live="polite" id="status"></div>
Common ARIA attributes
| Attribute | Effect |
|---|
role | Overrides implicit element role (e.g., role="navigation", role="dialog"). Use only when HTML has no matching element. |
aria-label | Provides an accessible name when there is no visible label text. |
aria-labelledby | Points to another element by ID whose text is used as the accessible name. |
aria-describedby | Points to element(s) providing additional description. |
aria-hidden | "true" removes element from the accessibility tree (decorative icons). |
aria-expanded | "true"/"false" on a button controlling a disclosure widget. |
aria-controls | ID of the element this control manages. |
aria-live | "polite" or "assertive" for regions that update dynamically. |
aria-current | "page" on the nav link for the current page. |
aria-disabled | "true" conveys disabled state without removing keyboard focus. |
9.5 Event Handler Attributes
HTML event attributes (onclick, onload, onsubmit,
etc.) bind JavaScript directly in markup. They are a simple way to wire handlers for
small-scale pages, though larger projects favor addEventListener in scripts
for separation of concerns.
<button onclick="handleClick(event)">Click</button>
<body onload="init()">
<form onsubmit="return validate()">
9.6 References
Attributes References