Czym są atrybuty globalne w HTML?

Question

Accepted Answer

**Atrybuty globalne** to atrybuty, które można umieścić na *dowolnym* elemencie HTML, niezależnie od jego typu. Zapewniają identyfikację, zakotwiczenie stylowania, informacje dostępności i metadane. ```html ``` ## Najpopularniejsze - **`id`** — unikalne zakotwiczenie dla CSS (`#hero`), JS (`getElementById`) i linków wewnątrz strony (`href="#hero"`). - **`class`** — główne zakotwiczenie do stylowania/skryptowania; wielokrotnie użyteczne w elementach. - **`data-*`** — dołącz niestandardowe dane do elementów, odczytaj w JS poprzez `element.dataset`. - **`tabindex`** — kontroluj możliwość fokusowania i kolejność tabulacji (`0` = możliwe do fokusowania w kolejności, `-1` = możliwe do fokusowania tylko przez skrypt). - **`hidden`**, **`title`**, **`lang`**, **`role`**, **`aria-*`** — widoczność, podpowiedzi, język i dostępność. ## data-* w akcji ```html ``` ```js button.dataset.action; // "delete" button.dataset.id; // "7" (always a string) ``` ## Dlaczego to ważne Atrybuty globalne to wspólny zestaw narzędzi, które używasz na niemal każdym elemencie — `class`/`id` do stylowania i skryptowania, `data-*` do przekazywania danych do JS, oraz `tabindex`/`role`/`aria-*` do dostępności. Znajomość ich utrzymuje markup czysty i zachowanie spójne.