What are global attributes in HTML?

Question

Accepted Answer

**Global attributes** are attributes you can put on *any* HTML element, regardless of its type. They provide identification, styling hooks, accessibility info, and metadata. ```html ``` ## The most-used ones - **`id`** — unique anchor for CSS (`#hero`), JS (`getElementById`), and in-page links (`href="#hero"`). - **`class`** — the primary styling/scripting hook; reusable across elements. - **`data-*`** — attach custom data to elements, read in JS via `element.dataset`. - **`tabindex`** — control focusability and keyboard tab order (`0` = focusable in order, `-1` = focusable only via script). - **`hidden`**, **`title`**, **`lang`**, **`role`**, **`aria-*`** — visibility, tooltips, language, and accessibility. ## data-* in action ```html ``` ```js button.dataset.action; // "delete" button.dataset.id; // "7" (always a string) ``` ## Why it matters Global attributes are the shared toolkit you use on nearly every element — `class`/`id` for styling and scripting, `data-*` for passing data to JS, and `tabindex`/`role`/`aria-*` for accessibility. Knowing them keeps markup clean and behavior consistent.