¿Qué son los atributos globales en HTML?

Question

Accepted Answer

**Atributos globales** son atributos que puedes colocar en *cualquier* elemento HTML, independientemente de su tipo. Proporcionan identificación, hooks para estilos, información de accesibilidad y metadatos. ```html ``` ## Los más utilizados - **`id`** — anclaje único para CSS (`#hero`), JS (`getElementById`) y enlaces dentro de la página (`href="#hero"`). - **`class`** — el hook principal para estilos/scripting; reutilizable en múltiples elementos. - **`data-*`** — adjuntar datos personalizados a elementos, accesibles en JS mediante `element.dataset`. - **`tabindex`** — controlar la capacidad de enfoque y el orden de tabulación con teclado (`0` = enfocable en orden, `-1` = enfocable solo mediante script). - **`hidden`**, **`title`**, **`lang`**, **`role`**, **`aria-*`** — visibilidad, tooltips, idioma y accesibilidad. ## data-* en acción ```html ``` ```js button.dataset.action; // "delete" button.dataset.id; // "7" (always a string) ``` ## Por qué es importante Los atributos globales son el conjunto de herramientas compartido que utilizas en casi cualquier elemento — `class`/`id` para estilos y scripting, `data-*` para pasar datos a JS, y `tabindex`/`role`/`aria-*` para accesibilidad. Conocerlos mantiene el markup limpio y el comportamiento consistente.