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