HTML global attributes, such as id and lang, are a handy set of attributes that can be applied to any element, letting you collectively control identification, language, and display behavior.
id class style partlang dir translatecontenteditable inputmode enterkeyhint autocapitalizerole aria-*各種hidden inert popover anchordata-* item* 系nonce virtualkeyboardpolicytabindex accesskey draggable autofocus以下 34 個 が HTML Living Standard で正式に列挙（実験的属性は★表記）。
括弧内は主用途。
最も頻繁に使われるグローバル属性の一つが class 属性です。CSSやJavaScriptで要素を選択する際に用いられます。
HTML
<p class="highlight">これはハイライトされる文章です。</p>上記の例では、CSSで .highlight を指定すると、このクラスを持つ要素全体に対してスタイルを適用できます。またJavaScriptのDOM操作でも、同じクラスを持つ要素をまとめて操作できます。
HTML
<p class="highlight large-text">複数クラスを指定した例</p>クラス名をスペース区切りで複数指定でき、柔軟にスタイリングやスクリプトでの操作が可能になります。
id 属性は、文書全体で一意（ユニーク）である必要がある特別な識別子を付与するために使用されます。要素を一意に識別したり、アンカーリンク（ページ内リンク）のターゲットに利用したり、JavaScriptで特定要素を直接取得・操作する際に便利です。
HTML
<h2 id="about-us">About Us</h2>#about-us { font-weight: bold; }<a href="#about-us">About Usセクションへ移動</a>id 属性の値は、ページ内で重複してはいけない というルールがあります。インラインでCSSを直接記述したい場合に使用します。ただし、外部スタイルシートや内部スタイルシートを使うのが原則的に望ましいです。メンテナンス性を考慮すると、インラインスタイルの多用は避けるのが一般的です。
HTML
<p style="color: red; font-size: 20px;">このテキストは赤色かつ20pxで表示されます。</p>要素の追加情報や説明を短い文言で示すときに使います。マウスカーソルを上に乗せるとブラウザがツールチップとして表示する場合が多いです。また、支援技術(スクリーンリーダーなど)での読み上げ方法やSEOにも影響を及ぼす可能性があります。
HTML
<a href="https://example.com" title="公式サイトへのリンク">
Example社公式サイト
</a>title 属性のツールチップは、マウス操作が前提となるため、キーボードユーザーや一部の支援技術では十分に伝わらないことがあります。重要な情報は別の方法（テキストコンテンツやARIA属性など）でも提供するのが望ましいです。要素内部の言語を指定するために使用します。支援技術や検索エンジン、ブラウザが言語を正しく判別する指標になります。ページ全体のHTMLタグに設定することが多いですが、特定の要素内だけ言語が異なる場合にも役立ちます。
HTML
<html lang="ja">
<head> ... </head>
<body> ... </body>
</html>HTML
<p>この部分は日本語です。</p>
<p lang="en">This part is in English.</p>要素を翻訳ツールにかけるかどうかを指定します。yes または no を指定でき、たとえば自動翻訳をさせたくないブランド名や特殊な用語が含まれる箇所に translate="no" を設定しておくと、誤訳を防ぐ効果が期待できます。
HTML
<span translate="no">MyBrand</span> は弊社の登録商標です。テキストの方向を指定します。通常は ltr（左から右）や rtl（右から左）を指定するのに用います。アラビア語やヘブライ語など、右から左に読む言語を表示する場合に利用します。
HTML
<p dir="rtl">右から左へ表示される文章</p>lang 属性と組み合わせて使用し、適切な言語と方向性を明示することで、アクセシビリティや表示の正確さが向上します。要素がフォーカスを受け取る順番（タブ順）を指定します。キーボード操作のしやすさを向上させるのに役立ちます。0、正の数、負の数で挙動が変わるため、使い方には注意が必要です。
tabindex="0"tabindex="-1"tabindex="1" 以上の正数HTML
<div tabindex="0">
ここにタブでフォーカスを移動できます
</div>tabindex は誤用すると、キーボード操作の順番を混乱させる原因になるため、慎重に扱うべき属性です。要素に対して、キーボードショートカット（アクセラレータキー）を割り当てます。これにより、ユーザーが特定のキー操作で要素にフォーカスを移したりすることができます。
HTML
<button accesskey="s">[S] 検索</button>OSやブラウザによってショートカットキーの組み合わせ（Alt + S など）は異なるため、ユーザー側で統一感がないのが実情です。
要素の内容をユーザーが直接編集できるようにする属性です。
HTML
<div contenteditable="true">
ここをクリックすると、テキストを編集できます。
</div>要素をドラッグ可能にするかを指定する属性です。true、false、auto を指定できます。draggable="true" で要素がドラッグ可能となり、ドラッグ&ドロップの機能をJavaScriptで実装できるようになります。
HTML
<img src="sample.png" draggable="true" alt="ドラッグ可能な画像" />dragstart, dragover, drop など）を用いることで、画像やテキスト要素を自由にレイアウト変更したり、ファイルアップロードのUIを作成したりできるようになります。要素内のテキストに対してスペルチェックを行うかどうかをブラウザに指示します。true または false を指定します。
HTML
<p contenteditable="true" spellcheck="true">
ここでテキストのスペルチェックが行われる
</p>lang 属性の値やOS/ブラウザ設定に依存します。要素が非表示であることを示します。CSSでの display: none; に近い振る舞いをし、スクリーンリーダーなどにも要素がないかのように振る舞うのが基本仕様です。ただしブラウザや支援技術によっては取り扱いが異なる場合もあるため注意が必要です。
HTML
<p hidden>この文章は非表示です。</p>aria-hidden="false" などのARIA属性）を用いることがあります。モバイル端末の画面キーボードに表示される「エンターキー」のラベルを指定します。ユーザーエージェントによっては無視される場合がありますが、特にモバイルにおける入力フィールドでユーザー体験を向上させるために活用できます。
enterkeyhint="search"enterkeyhint="send"enterkeyhint="done"enterkeyhint="go"HTML
<input type="text" enterkeyhint="search" />モバイルデバイスなどで表示されるキーボードの種類を指定する属性です。たとえばメールアドレス入力用に記号を多く含むキーボードを表示したり、数字用キーボードを表示したりする場合に利用します。
nonetexttelurlemailnumericdecimalsearchHTML
<input type="text" inputmode="email" />このように指定することで、モバイル端末でメールアドレス入力に適したキーボードレイアウトが表示される可能性が高まります。
カスタム要素(カスタムタグ)や、または拡張された組み込み要素を使うために使用する属性です。HTMLのカスタム要素（Web Components） の仕組みと組み合わせて利用されますが、ややマニアックな領域です。
使い方例 (カスタム要素)
HTML
<button is="my-special-button">カスタムボタン</button>JavaScriptでカスタム要素（my-special-button）として定義しておくと、標準の <button> を拡張した機能を使うことができます。
厳密には “Global Attributes” として一部扱われるマイクロデータ用の属性（itemprop, itemtype, itemscope, itemid, itemref）があります。構造化データをマークアップする際に使用します。検索エンジンやSNSなどでリッチスニペットを表示させる際に活躍します。
例: レシピ情報のマイクロデータ
HTML
<div itemscope itemtype="https://schema.org/Recipe">
<h1 itemprop="name">フレンチトースト</h1>
<p itemprop="description">
卵と牛乳を使ったシンプルな朝食メニューです。
</p>
</div>このようにマイクロデータ属性を付与することで、検索エンジンに対してデータの構造を明示できます。
Shadow DOM内にある要素を、Shadow DOM外からスタイルを当てるために使う属性です。Web Componentsを使った高度なコンポーネント開発で役立ちますが、まだ実装状況にばらつきがあります。
使い方例
HTML
<!-- Shadow DOM内 -->
<div part="title">タイトル部分</div>
<!-- Shadow DOM外のCSS -->
:host ::part(title) {
font-weight: bold;
color: blue;
}ユーザー定義のWeb Componentで、Shadow DOMのカプセル化を維持しながら外部から特定の部分にだけCSSを当てたいときに利用します。
コンテンツセキュリティポリシー（CSP）の設定時に用いられる属性で、インラインスクリプトやスタイルの安全性を担保するために使われます。適切に生成された nonce (number used once) を設定することで、CSPの制限下でも特定のスクリプトを許可することができます。
HTML
<script nonce="ランダム文字列">
// 安全とみなされるインラインスクリプト
</script>role や aria-* 属性はHTMLの標準仕様では「グローバル属性」に含まれないものの、多くの要素で利用可能であり、アクセシビリティ改善に密接に関わります。autocapitalize, enterkeyhint, part など）はモバイル環境や特定ブラウザで限定的にサポートされていることがあります。常に最新のブラウザ対応状況を確認しましょう。HTMLのグローバル属性は、要素を問わず付与可能なため、その汎用性と重要性は非常に高いです。単に見た目や機能を追加するだけでなく、アクセシビリティや国際化、多言語サポート、セキュリティなど多岐にわたる役割を担っています。特に、アクセシビリティや入力支援などの分野で正しく理解・設定することで、ユーザー体験を大きく向上させられます。
class, id, style, title といったよく使う基本的な属性から習得すると良いでしょう。dir, translate, autocapitalize, inputmode などの少しマニアックな属性や、マイクロデータ属性、CSPに関わる nonce などに着目してみると、より高度な実装やアクセシビリティ向上が期待できます。グローバル属性を正しく使いこなせば、HTML文書の品質が向上し、保守性やユーザーに対する利便性も高まります。ぜひ開発の中で積極的に活用してみてください。