HTMLのグローバル属性とは何ですか?

Question

HTMLのグローバル属性とは何ですか?

Accepted Answer

**グローバル属性**は、要素のタイプに関わらず、*任意の*HTML要素に付与できる属性です。識別、スタイリングフック、アクセシビリティ情報、メタデータを提供します。 ```html ``` ## よく使われる属性 - **`id`** — CSS (`#hero`)、JS (`getElementById`)、ページ内リンク (`href="#hero"`) のためのユニークなアンカー。 - **`class`** — スタイリング/スクリプティングの主要なフック。要素間で再利用可能。 - **`data-*`** — 要素にカスタムデータを付与し、JS内で `element.dataset` を使って読み込み。 - **`tabindex`** — フォーカス可能性とキーボードタブ順序を制御 (`0` = 順序通りフォーカス可能、`-1` = スクリプトによるのみフォーカス可能)。 - **`hidden`**、**`title`**、**`lang`**、**`role`**、**`aria-*`** — 表示/非表示、ツールチップ、言語、アクセシビリティ。 ## data-* の実装例 ```html ``` ```js button.dataset.action; // "delete" button.dataset.id; // "7" (always a string) ``` ## なぜ重要なのかグローバル属性は、ほぼすべての要素で使う共通のツールキットです。スタイリングとスクリプティングには `class`/`id`、JSへのデータ渡しには `data-*`、アクセシビリティには `tabindex`/`role`/`aria-*` を使用します。これらを知ることで、マークアップを清潔に保ち、動作を一貫させることができます。